javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
本文实例讲述了javascript和jQuery中的AJAX技术。分享给大家供大家参考，具体如下：
1.什么是AJAX？
AJAX即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。
2.AJAX在原生JS中的实现
尽管随着JS框架的盛行，在jQuery中，实现AJAX过程相当简单，但是对于一些不需要加载jQuery这种庞大插件的项目中，还是要采用AJAX的原生实现！
要实现原生JS的AJAX过程，对于高版本浏览器，支持JS中的XMLHttpRequest对象，而低版本的浏览器IE6，IE7不兼容，因此要使用ActiveXObject()对象来实现，兼容各种版本的XMLHttpRequest对象的构建如下：
varxml;
if(window.XMLHttpRequest)
{
xml=newXMLHttpRequest();
}
else{
xml=newActiveXObject("Microsoft.XMLHTTP");
}
对于XMLHttpRequest对象有很多种方法，
（1）xml.readyState：表示请求的状态其中xml.readyState=0表示请求的准备阶段，xml.readyState=1,表示开始发送请求，xml.readyState=2表示服务器已经接收到请求，xml.readyState=3表示服务器正在处理请求，xml.readyState=4表示服务器处理完请求，并将请求返回到客户端。
0－（未初始化）还没有调用send()方法
1－（载入）已调用send()方法，正在发送请求
2－（载入完成）send()方法执行完成，已经接收到全部响应内容
3－（交互）正在解析响应内容
4－（完成）响应内容解析完成，可以在客户端调用了
（2）xml.status：表示请求过程中的状态说明，
1xx信息提示：
这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个1xx响应。
2XX表示成功，
3XX重定向
客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。
4xx客户端错误
发生错误，客户端似乎有问题。例如，客户端请求不存在的页面，客户端未提供有效的身份验证信息。
5XX服务器错误
服务器由于遇到错误而不能完成该请求。
（3）用原生JS，实现AJAX中的get请求：
varxml=newXMLhttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200)
{
vardata=JSON.parse(xml.responseText);
}
else{
alert("请求失败");
}
}
xml.open("get","url","true");//url里面为请求的地址，true表示异步请求
xml.send(null)
（4）用原生JS实现post请求：
varxml=newXMLhttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200)
{
vardata=JSON.parse(xml.responseText);
}
else{
alert("请求失败");
}
}
xml.open("post","url","true");//url里面为请求的地址，true表示异步请求
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置post请求的请求头
xml.send(null)
为什么要设置请求头信息：
默认情况下，Ajax以content-type:text/plain,方式来提交数据，此时服务器将忽略post实体部分的数据，所以服务器无法获得post请求中的数据。
解决方法：
Content-Type:application/x-www-form-urlencoded
3.AJAX中的跨域技术
（1）.跨域的方式有首先是代理访问。<script></script>这个方法可以跨域访问JS等文件，比如说
<scriptsrc="www.abc.com/de.php?callback=dosomething"</script>
就像引入JS一样，但是不同的是，JSONP方法跨域需要服务器端语言的配合。
（2）.只能用于GET方法的jsonp方法，进行跨域比如我们有
datatype:jsonp
jsonp:callback
然后加上后台处理即可！~
(3).利用XHR2方法，在后台进行操作从而实现跨域支持IE9以上比如header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-methods:POST,GET");即可实现跨域，并且我们会有在*里面的是允许跨域的地址来源！~
(4).document.domain来跨域
document.domain在需要进行跨域的iframe中，加上相同的document.domain,xxx.com
4.下面主要介绍JSONP和CORS跨域访问解决办法
（1）首先对于JSONP跨域：因为AJAX本身是不能跨域的，有同源保护策略，但是带有src的标签可以跨域
比如<script>和<img>等标签，可以实现跨域请求，这里主要介绍jQuery中JSONP方法的跨域实现：
JSONP的实现思路：
1.前端创建script标记，设置src，添加到head中（你可以往body中添加）
2.后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据
3.回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）
$.ajax({
type:"get",
async:false,
url:"ajax.ashx",
dataType:"jsonp",
jsonp:"callbackparam",//传递给请求处理程序或页面的
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称
success:function(json){
alert(json);
alert(json[0].name);
},
})
（2）CORS跨域方法
CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问，CORS允许一个域上的网络应用向另一个域提交跨域访问请求，实现此功能非常简单，只需要由服务器发送一个相应请求即可！比如在PHP中可以写成：
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-methods:POST,GET")
在XHR2方法中实现，并且对于IE，只支持IE9以上浏览器
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。