一、XMLHttpRequest(XML),Ajax介绍
1.2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是Asynchronous+JavaScript + XML的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。
2.Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。
XHR的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。
虽然Ajax中的x代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术不一定使用
二、xhr,asynchronous同步or异步
1.var xhr = new XMLHttpRequest();
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。
2.如果是IE6及以下，那么我们必须还需要使用ActiveX对象通过MSXML库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我们可以写一个函数(了解)
在使用XHR对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(method,url,async);
open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上。
xhr.send(null);
当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性。那么一共有四个属性：
属性名
说明
responseText
作为响应主体被返回的文本
responseXML
如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM文档
status
响应的HTTP状态
statusText
HTTP状态的说明
接受响应之后，第一步检查status属性，以确定响应已经成功返回。一般而已HTTP状态代码为200作为成功的标志。当然还有其他的一些状态码
HTTP状态码
状态字符串
说明
200
OK
服务器成功返回了页面
400
Bad Request
语法错误导致服务器不识别
401
Unauthorized
请求需要用户认证
404
Not found
指定的URL在服务器上找不到
500
Internal Server Error
服务器遇到意外错误，无法完成请求
503
ServiceUnavailable
由于服务器过载或维护导致无法完成请求
我们判断HTTP状态值即可，不建议使用HTTP状态说明，因为在跨浏览器的时候，可能会不太一致。
同步固然重要但是异步才是我们真正需求的使用异步请求会出发onreadystatechange事件,然后检测readyState属性值即可
值
状态
说明
0
未初始化
尚未调用open()方法
1
启动
已经调用open()方法，但尚未调用send()方法
2
发送
已经调用send()方法，但尚未接受响应
3
接受
已经接受到部分响应数据
4
完成
已经接受到全部响应数据，而且可以使用
三、GET和POST请求
1.提供服务器请求的过程中，有两种方式，分别是：GET和POST。在Ajax使用的过程中，GET的使用频率要比POST高。
2.两种头信息
在这里简单的解释一下两种头信息
a.通过xhr.getResponseHeader(“Content-Type”);可以获取单个响应头信息
b.getAllResponseHeaders();获取整个响应头信息
alert(xhr.getAllResponseHeaders());
c.使用setRequestHeader()设置单个请求头信息
xhr.setRequestHeader('MyHeader', 'Lee'); //放在open方法之后，send方法之前
需要注意的地方是POST请求时需要设置Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3.GET
GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便提交给服务器。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
注意:特殊字符(eg:&等)，传参产生的问题可以使用encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为utf-8格式即可。或者使用提交url通用方法。
4.POST
POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的POST传输方式。
xhr.open('post', 'demo.php', true);
而发送POST请求的数据，不会跟在URL的尾巴上，而是通过send()方法向服务器提交数据。
xhr.send('name=Lee&age=100');
一般来说，向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
5.json数据
vardata= xhr.responseText();
JSON.parse(data); //转换成对象
6.键值对的拼接成data发送
最后返回“username=xq&age=18”类型即可
四、封装Ajax
1.案例封装ajax
五、jsonp
1.Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
网友评论