ajax

window.onload = function () {
        //通过javascript请求服务器的步骤:
        //1.创建一个XMLHttpRequest对象
        var xhr = null;
        //通过能力检测,在不同浏览器下创建该对象
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if (ActiveXObject){
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        //设置回调函数
        xhr.onreadystatechange = function () {
            //在请求的不同阶段都会回调这个函数
            if (xhr.readyState == 4&&xhr.status==200) {
                alert(xhr.responseText);//获取服务器响应的文本数据
            } 
        }
        //设置初始化请求,告诉xhr对象,使用get还是post发起请求,要请求那个地址,是否异步
        xhr.open('get', 'xxxxxx.ashx?id='+Math.random(), true);//路径,true代表异步请求,加随机数是为了避免有缓存
        //1.2GET方式请求可以设置浏览器不使用缓存
        //如果需要手动设置请求报文头,则需要在初始化之后(open()之后),在发送之前(send()之前),通过setRequestHeader(key,value)来设置
        xhr.setRequestHeader("If-Modified-Since", "0"); 
        //开始发起请求
        xhr.send(null);//get请求,没有请求报文体。所以传递null
    }

Ajax在本质上是一个浏览器端的技术 XMLHttpRequest

Ajax技术之主要目的在于局部交换客户端及服务器间之数据

这个技术的主角XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新)

与服务器之间的沟通,完全是透过Javascript 来实行

使用XMLHttpRequest 本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序

AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦

注:JavaScript是一门单线程语言。无法将指定的一段js开启一个新的线程来执行。

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0:未初始化。new完后;
1:已打开(已经初始化了)。对象已经创建并初始化,但还未调用send方法
2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回;
3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整;
4:已加载。所有数据接收完毕

getAllResponseHeaders() 获取HTTP响应头的整个列表

getResponseHeader(‘key’) 仅获取指定的HTTP响应头

responseText 使用字符串返回HTTP响应

responseXML(xml对象,不是xml字符串) 使用XML DOM对象返回HTTP响应,返回的是一个对象,不是xml字符串。

不支持跨域请求,不能跨端口请求

post请求

通过ajax发起post请求时,需要注意的3点:

1.初始化的时候必须设置为post
xhr.open(‘post’,’url’,true);

2.必须设置请求报文头Content-Type的值为:application/x-www-form-urlencoded

xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

3.如果有请求报文体,则在调用send()方法的时候,设置。
xhr.send(‘txtName=steve&gender=male&age=18’);

区别

post不用关心缓存问题,不会出现缓存
post不会出现中文乱码
参数在报文体中,安全

get

出现乱码问题时在js中window.encodeURIComponent()进行编码,就可解决中文乱码问题
posted on 2017-05-14 22:06  NE_STOP  阅读(2)  评论(0编辑  收藏  举报  来源