一、主体：封装ajax函数：ajaxFunc
function ajaxFunc(method, url, data, callback, flag) { //(1)创建ajax对象 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHttp'); } //(2)请求方式get||post method = method.toUpperCase(); if(method == 'GET'){ xhr.open(method, url, flag); xhr.send(); }else if(method == 'POST'){ xhr.open(method, url, flag); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(data); } //(3)监听请求数据 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ callback(xhr.responseText); } xhr = null; } } } //(4)回调函数对数据处理 function callback(requestData){ var obj = JSON.parse(requestData); }
二、次要
1.ajax全称：asynchronous JavaScript and xml
2.ajax特点：局部获取数据，且不用刷新页面（比如地图）；受同源策略的限制，只能获取同源的资源，除非不同源的服务器某资源的内部进行配置，允许该页面访问。
3.请求方式：get、post、put、delete；
4.get、post的区别：
（1）提交方式：
get：请求的数据在URL之后，用？分隔URL和数据，用&连接多个参数，数据是英文或数字会原样发送，如果是空格转换为+，如
果是中文或其他字符用base64加密，得到16进制的ASCII码值；
post：把提交的数据放在HTTP的包体中
（2）传输数据大小：
首先，HTTP协议没有对传输数据大小进行限制，也没有对URL长度进行限制，但是不同的浏览器和服务器对URL的长度进行了限制（大约都在2K多一点的字节），因此
get的数据请求受到了限制
post虽然不受URL的限制，但是各个服务器会规定对post提交的数据大小进行限制，不过post请求的数据要比get大
（3）安全性：
由于数据提交方式的不同，get请求要更加不安全
（4）post不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则；soap是http post的一个专用版本，遵循一种特殊的xml格式，Content-type设置为
text/xml，任何数据都可以xml化。
5.ajax的请求过程：
6.readystatechange事件——监听资源加载状态
支持该事件（readystatechange）的每一个对象都有一个readyState属性
该属性（readyState）包括5个状态值：
0：未初始化
1：调用了send方法，正在请求资源
2：请求资源完成
3：交互中，解析响应的内容
4：完成
不是所有的对象都会经历readyState属性的每一个状态值的变化，有的对象会直接跳过某些状态
7.服务器响应的状态码：
200：成功请求资源
300：请求的资源位置发生变化
400：服务器拒绝、找不到、不允许 该URL的请求
500：服务器内部问题