下面用具体的代码进行解释：
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();//在这里创建 XMLHttpRequest对象
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.open("GET",url,true); //请求的方式和请求地址
xmlhttp.send(null);//发送请求
xmlhttp.onreadystatechange=state_Change;//监听回调函数
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change() //这里是回调函数
{
if (xmlhttp.readyState==4&&xmlhttp.status==200)
//当满足这两个条件时表示请求成功,完成响应 4 = "loaded", 200 = OK
{
var data=xmlhttp.responseText; //拿到服务器返回的数据
// ...our code here...在这里进行数据返回后的操作
}else
{
alert("Problem retrieving XML data");
}
}
3.原生写法中的注意点
(1).open() 的第三个参数中使用了 "true",该参数规定请求是否异步处理，默认是异步。True 表示脚本会在 send() 方法之后继续执行.ajax，而不等待来自服务器的响应。
(2).关于
(3).关于 由服务器返回的 HTTP 状态代码，200 表示成功，而 404 表示 "Not Found" 错误。当 小于 3 的时候读取这一属性会导致一个异常。(后面会有http状态码的详细解读)
三.中的Ajax
对原生Ajax做了很好的封装，使用起来非常简单方便,具体的很多方法如 $.ajax.ajax，$.post， $.get， $.等能根据不同需要进行调用，写法更加简洁，但是为了兼顾各个方法在这里我以一个通用的方法 $.ajax为例做一个简单的解析,按照下面的模式写好各个参数,就能成功进行Ajax的请求了,可能在实际中使用 $.post， $.get 这两个方法使用比较多，但是理解$.ajax 这个通用的方法能对封装原理有很好的认识。
$.ajax({
type: //数据的提交方式：get和post
url: //请求地址
async: //是否支持异步刷新，默认是true
data: //需要提交的数据
dataType: //服务器返回数据的类型，例如xml,String,Json等
success:function(data){
} //请求成功后的回调函数,参数data就是服务器返回的数据
error:function(data){
} //请求失败后的回调函数，根据需要可以不写，一般只写上面的success回调函数
})
四.GET or POST？
作为Ajax最常用的两种数据提交方式，GET和POST有着自己的特点和适用场景，正确区分GET和POST的不同并根据实际需要进行选用在开发中十分重要，简单但是关键！
先上一张GET 和 POST的比较图，从这张图中可以看出两者之间的差别：
从表格中拎出关键点：1.传递数据的方式不同：get是直接把请求数据放在url的后面，是可见的，post的请求数据不会显示在url中，是不可见的。 2.数据长度和数据类型的差异：get有数据长度的的限制，且数据类型只允许ASCII字符，post在这两方面都没有限制。 3.安全性的差异：get不安全，post更安全。
由此得出的两者的使用场景：get使用较方便，适用于页面之间非敏感数据的简单传值，post使用较为安全，适用于向服务器发送密码、token等敏感数据。
五.和的区别
封装的Ajax回调函数中，、error、是最常用的三个，其中，和error很好区别，一个是请求成功调用的，另一个是请求失败调用的，从字面上就可以理解。但是和容易混淆，在这里特别做一个说明：
:请求成功后回调函数。
:请求完成后回调函数 (请求成功或失败时均调用)。
注意到括号里面了吗，没错，区别就在于只要请求完成，不论是成功还是失败均会调用。也就是说如果调用了，一定会调用；反过来调用了，不一定会调用。(状态码404、403、301、302...都会进入，只要不出错就会调用)
六.XML -> JSON
Ajax中的是 "x" 指的就是XML。
xml:可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
xml作为一种数据交互格式，广泛用在计算机领域，然而，随着json的发展，json以其明显的优势已经渐渐取代了xml成为现在数据交互格式的标准，所以在这里，想强调的是，json现在是主流的数据交互格式，前后端的交互标准，无论是前端提交给后台的数据，还是后台返回给前端的数据，都最好统一为json格式，各自接收到数据后再解析数据即可供后续使用。所以 "Ajax" 实际上已经发展为 "Ajaj"
七.JSON和JSONP
json 和 jsonp 看起来只相差了一个 “p” ，然而实际上根本不是一个东西，千万别以为是差不多的两个概念。
json：( , JS 对象标记) 是一种轻量级的数据交换格式。
jsonp：一种借助
限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情
站长微信:Jiucxh
