版权归作者所有。
商业转载请联系作者授权，非商业转载请注明出处。
链接：http://caibaojian.com/ajax-jsonp.html
来源：http://caibaojian.com
本文主要介绍了如何通过原生JavaScript封装ajax请求，并给出了具体的实现代码和详细的说明，希望对你有所帮助。
首先，JS原生Ajax
Ajax:一种不刷新整个页面就能请求数据的方式；
ajax的技术核心是XMLHttpRequest对象。
Ajax请求流程：创建XMLHttpRequest对象，连接服务器，发送请求，接收响应数据；
这是一个简单的函数包，后面会解释
ajax({
Url: '。/TestXHR.aspx '，//请求地址
Type: 'POST '，//请求模式
Data: {name:' super '，age: 20}，//请求参数
dataType: 'json '，
success:函数(响应，xml) {
//将成功后执行的代码放在这里
},
fail:功能(状态){
//把失败后执行的代码放在这里
}
});
函数ajax(选项){
options=options | | { }；
options . type=(options . type | | ' GET ').toUpperCase()；
options . DataType=options . DataType | |“JSON”；
var params=format params(options . data)；
//创建-非IE6-步骤1
if(窗口。XMLHttpRequest) {
var xhr=new XMlhttprequest()；
} else {//IE6及以下浏览器
var xhr=new ActiveXObject('微软。XMLHTTP’)；
}
//接收-步骤3
xhr . onreadystatechange=function(){
if (xhr.readyState==4) {
var status=xhr.status
if (status=200 status 300) {
options . success options . success(xhr . responsetext，xhr . responsexml)；
} else {
options.fail options.fail(状态)；
}
}
}
//连接并发送-步骤2
if (options.type=='GET') {
xhr.open('GET '，options.url '？'params，true)；
xhr . send(null)；
} else if (options.type=='POST') {
xhr.open('POST '，options.url，true)；
//提交表单时设置内容类型
xhr . SetRequestHeader(' Content-Type '，' application/x-www-form-URL encoded ')；
xhr . send(params)；
}
}
//格式参数
函数格式参数(数据){
var arr=[]；
for(数据中的变量名称){
arr . push(encodeURIComponent(name)'=' encodeURIComponent(data[name])；
}
arr.push(('v=' Math.random())。替换('.',''));
return arr . join(')；
}
1.创造
1.1，IE7及以上支持原生XHR对象，所以可以直接作为：var oAjax=new XMLHttpRequest()；
在1.2、IE6和以前的版本中，XHR对象是由MSXML库中的一个ActiveX对象实现的。有些书在IE中提炼出了这类对象的三个不同版本，即MSXML2。XMLHttp，MSXML2。XMLHttp.3.0和MSXML2。XMLHttp.6.0；个人觉得太麻烦，可以用下面的语句直接创建：var o Ajax=new ActiveX object(' Microsoft . xmlhttp ')；
2.连接并发送
2.1.open()函数的三个参数：请求模式、请求地址、是否异步请求(同步请求比较少见，至今未使用)；
2.2.GET请求通过URL参数向服务器提交数据，POST作为send参数向服务器提交数据。
2.3.在POST请求中，发送数据前，设置表单提交的内容类型；
2.4.提交给服务器的参数必须由encodeURIComponent()编码。事实上，以参数列表“key=value”的形式，key和值都需要编码，因为它们包含特殊字符。每次发出请求，参数列表中都会拼出一串“v=xx”，以便每次拒绝缓存，直接向服务器请求。
EncodeURI():用于编码整个URI，不编码属于URIs的特殊字符，如冒号、斜杠、问号、井号；其对应的解码函数decoderuri()；
EncodeURIComponent():用于对URI的一部分进行编码，它会对它找到的任何非标准字符进行编码；其对应的解码函数decoderuicomponent()；
3.接收
3.1.收到响应后，响应的数据会自动填充XHR对象，相关属性如下
响应文本：响应返回的正文内容是字符串类型；
Responsexml:如果响应的内容类型为‘text/xml’或‘application/xml’，则对应的XML数据会保存在该属性中，即对应于XML的文档类型；
状态：响应的HTTP状态代码；
statustext:HTTP状态的描述；
3.2.XHR对象的readyState属性指示请求/响应过程的当前活动阶段。该属性的值如下
0-未初始化的open()方法未被调用；
1- start，调用open()方法，但不调用send()方法；
2- send，已调用send()方法，未收到响应；
3-接收，已收到部分响应数据；
4-完成，已收到所有响应数据；
只要readyState的值发生变化，就会调用readystatechange事件(其实为了逻辑上的流畅，readystatechange可以放在send之后，因为send请求服务器的时候，网络通信会比较费时间，send之后指定readystatechange事件处理程序也是可以的，我一般都是这样用的，但是为了标准化和跨浏览器兼容性，更好在打开之前指定)。
3.3.在readystatechange事件中，首先判断是否收到响应，然后判断服务器是否成功处理了请求。xhr.status是状态码，以2开头，全部成功。304表示它是从高速缓存中获得的。上面的代码在每次请求时都会添加一个随机数，所以不会从缓存中取值，所以不需要判断状态。
4.ajax请求不能跨域！
第二，JSONP
JSONP(带Padding的JSON)是一种跨域的请求方法。主要原则是利用脚本标签可以跨域请求的特性。src属性将请求发送给服务器，服务器返回js代码，网页接受响应后直接执行，这和通过脚本标签引用外部文件的原理是一样的。
JSONP由回调函数和数据两部分组成。回调函数一般由网页控制，作为参数发送给服务器，服务器将函数和数据作为字符串返回。
例如，当网页发起一个请求时，网页创建一个脚本标记，并将其src指定为http://www.superfiresun.com/json/?回调=进程。要返回的数据由服务器拼写，并作为最有用的参数传入。服务器返回的数据格式类似于“process({ ' name ' : ' super firun ' })”，网页接收响应值。因为请求者是脚本，所以相当于直接调用process方法，传入一个参数。
单看响应返回的数据，JSONP比ajax多了一个回调函数。
函数jsonp(选项){
options=options | | { }；
if(！options.url ||！options.callback) {
引发新错误(“参数非法”)；
}
//创建脚本标记并将其添加到页面
var callbackName=(' jsonp _ ' Math . random())。替换('.', '');
var Ohead=document . GetElementsBytagName(' head ')[0]；
options . data[options . callback]=callback name；
var params=format params(options . data)；
var OS=document . CreateElement(' script ')；
ohead . appendchild(OS)；
//创建jsonp回调函数
window[callback name]=function(JSON){
ohead . remove child(OS)；
cleartime out(OS . timer)；
window[callback name]=null；
options . success options . success(JSON)；
};
//发送请求
' oS.src=options.url '？params
//超时处理
if (options.time) {
OS . timer=setTimeout(function(){
window[callback name]=null；
ohead . remove child(OS)；
options . fail options . fail({ message : ' time out ' })；
}，时间)；
}
};
//格式参数
函数格式参数(数据){
var arr=[]；
for(数据中的变量名称){
arr . push(encodeURIComponent(name)'=' encodeURIComponent(data[I])；
}
return arr . join(')；
}
1.因为script标记的src属性只有在次设置时才起作用，所以script标记不能被重用，所以每次操作后都应该删除它；
2.在JSONP中，参数仍然需要编码。
3.如果不设置超时，就无法知道请求成功还是失败；
第三，模仿JQuery中的ready()事件
1.DOMContentLoaded事件在DOM树加载后立即执行，并且总是在加载前执行。
IE9，FF，chrome _ 6494 _ 1 . html ' target=' _ blank ' chrome，Safari3.1，Opera9支持该事件。
对于不支持此事件的浏览器，您可以使用以下代码：
setTimeout(函数(){
//代码块
}, 0) ;
一个DOMContentLoaded事件只能由DOM2级添加，即addEventListener()/attachEvent()。事件对象不提供任何额外信息。
2.readystatechange事件
IE为DOM文档的某些部分提供了这个事件(不同于XHR对象的readystatechange事件)。此事件的目的是提供有关文档或元素加载状态的信息，但此事件的行为有时很难预测。支持此事件的所有对象都有readyState属性，请注意，它不是事件对象。IE，Firefox4，Opera支持这个事件。
readyState属性具有以下值：
未初始化"-未初始化：对象存在，但尚未初始化；
“加载”-加载：对象正在加载数据；
“已加载”-加载后，对象加载有数据；
“交互”——交互：对象可以操作，但还没有完全加载；
完成：对象已完全加载；
2.1.并非所有对象都将经历readyState的这些阶段。如果此阶段不适用于某个对象，则该对象完全可以跳过此阶段，而无需指定哪个阶段适用于哪个对象。这意味着readyStatechange事件往往少于4次，对应的readystate属性值不是连续的。
2.2.对于文档，交互和完成阶段将在加载DOMContentLoaded的同时触发readystatechange事件；
load事件和readystatechange事件的触发顺序会根据页面的外部资源而变化，即readystatechange事件不会总是在load事件之前执行。外部资源越多，对readystatechange事件越有利。
交互和完成的顺序也不一致，任何人都有可能先执行。引用的外部资源越多，对互动阶段越有利。因此，为了尽早执行代码，应该同时判断两种状态。
3、多克隆
IE5.5支持当页面中有滚动条时，可以使用do scroll(' right ')/do scroll(' down ')来移动滚动条。这个方法只有在DOM加载后才能使用，所以在IE较低版本的浏览器中，可以用这个属性来判断DOM结构是否加载。引入这个属性是为了模仿jquery中的解决方案。
功能就绪(readyFn) {
//非IE浏览器
if (document.addEventListener) {
document . addevent listener(' DomContentLoaded '，function () {
readyFn readyFn()；
}，false)；
} else {
//方案一和方案二，哪个用起来快
var BaSey=false；
//方案1
document . attach event(' onreadystatechange '，function () {
if(BabY){
返回；
}
if(document . readystate==' complete ' | | document . readystate==' interactive '){
面包屑=真；
readyFn readyFn()；
};
});
//方案2
//jquery也会担心doScroll在iframe中会失败。这里判断当前页面是否放置在iframe中。
if(！window.frameElement) {
setTimeout(checkdoscoll，1)；
}
函数CheckDoscoll(){
尝试{
document . document element . doscoll(' left ')；
if(BabY){
返回；
}
面包屑=真；
readyFn readyFn()；
}
catch (e) {
//不断检查doScroll是否可用——是否加载了DOM结构。
setTimeout(checkdoscoll，1)；
}
};
}
};
注：
setTimeout(checkdoscoll，1)；目的是让浏览器尽快执行checkDoScroll函数，间隔时间设置为一毫秒，对当下的浏览器来说是不太可能的。每个浏览器都有自己默认的最小间隔时间，即使时间设置为最小间隔时间，也只是代表隔这些时间过去之后，JavaScript会把checkDoScroll加入到执行队列中，如果此时Java脚本语言进程空闲，则会立即执行该代码。
来自前端乱炖：http://www .html-js。com/article/1882
2016.11.17更新：看到很多搜索这篇文章进来，最上面的代码是互联网上比较完善的一个代码，下面附多一个在栈溢出的高分回答结合上面的代码，给出得到和邮政的两种不同请求方法：
var Ajax={ }；
ajax.x=function () {
if(类型XMLHttpRequest！=='undefined') {
返回新的XMlhttprequest()；
}
定义变量版本=[
MSXML2 .XmlHttp.6.0 '，
MSXML2 .XmlHttp.5.0 '，
MSXML2 .XmlHttp.4.0 '，
MSXML2 .XmlHttp.3.0 '，
MSXML2 .XmlHttp.2.0 '，
微软“XmlHttp”。
];
var xhr
for(var I=0；i versions.lengthi ) {
尝试{
xhr=new ActiveXObject(版本[I])；
打破；
} catch (e) {
}
}
返回保险附约
};
ajax.send=function (url ),方法、数据、成功、失败、异步){
if (async===未定义){
async=true
}
var x=Ajax。x()；
x.open(方法、url、异步);
x。onreadystatechange=function(){
if (x.readyState==4) {
var status=x.status
if (status=200 status 300) {
成功成功(x.responseText，x.responseXML)
} else {
失败失败(状态);
}
}
};
if(方法=='POST') {
x。SetRequestHeader('内容类型'，'应用程序/x-www-form-URL编码')；
}
x.send(数据)
};
ajax.get=function (url ),数据、回调、失败、异步){
var query=[]；
对于(数据中的定义变量键){
查询。push(encodeURIComponent(key)'=' encodeURIComponent(data[key])；
}
ajax.send(url (query.length？'?'查询。连接('): ' ')，'获取'，空，成功，失败，异步)
};
ajax.post=函数(url ,)数据、回调、失败、异步){
var query=[]；
对于(数据中的定义变量键){
查询。push(encodeURIComponent(key)'=' encodeURIComponent(data[key])；
}
ajax.send(url，' POST '，query.join(')，成功，失败，异步)
};
使用方法：GET
ajax.get('/test.php '，{foo: 'bar'}，function(response，xml) {
//成功
},
功能(状态){
//失败
});
邮政
ajax.post('/test.php '，{foo: 'bar'}，function(response，xml) {
//成功
},功能(状态){
//失败
});
如果觉得这篇对你有帮助有帮助，欢迎点击下面的分享。谢谢
扫一扫
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
