# ajax #

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()进行编码，就可解决中文乱码问题