JavaScript与jQuery AJAX技术详解及跨域解决方案

AJAX技术概述

本文通过具体实例，深入讲解JavaScript和jQuery环境下的AJAX技术实现，旨在为读者提供实用的参考指南。

1. 什么是AJAX？

AJAX全称为“Asynchronous Javascript And XML”（异步JavaScript和XML），是一种用于创建交互式网页应用的开发技术。

AJAX允许网页在后台与服务器进行少量数据交换，从而实现网页的异步更新。这意味着用户无需重新加载整个页面，即可对网页的特定部分进行更新，提升了用户体验。

相比之下，传统网页在需要更新内容时，必须重新加载整个页面，导致交互体验较差。

原生JavaScript实现AJAX

2. 原生JavaScript中AJAX的实现

尽管当前流行的JS框架使得jQuery中的AJAX实现变得非常简单，但在某些不需要引入jQuery这样庞大库的项目中，使用原生AJAX实现仍是必要的选择。

要实现原生JS的AJAX，高版本浏览器支持XMLHttpRequest对象。然而，低版本浏览器如IE6和IE7不兼容该对象，需使用ActiveXObject()来实现。为了兼容各种版本的浏览器，构建XMLHttpRequest对象的方法如下：

var xml;
if(window.XMLHttpRequest)
{
  xml=new XMLHttpRequest();
}
else{
  xml=new ActiveXObject("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：该属性表示请求过程中的HTTP状态码，用于判断请求是否成功。

1xx信息提示：

这些状态代码表示临时响应。客户端在收到常规响应之前，应准备接收一个或多个1xx响应。

2XX表示请求成功：

3XX表示重定向：

客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同页面，或通过代理服务器重复该请求。

4xx表示客户端错误：

发生错误，表明客户端似乎存在问题。例如，客户端请求不存在的页面，或未提供有效的身份验证信息。

5XX表示服务器错误：

服务器由于遇到内部错误而不能完成该请求。

（3）使用原生JS实现AJAX的GET请求：

var xml=new XMLhttpRequest();
xml.onreadystatechange=function(){
 if(xml.readyState==4&&xml.status==200)
 {
   var data=JSON.parse(xml.responseText);
  }
  else{
   alert("请求失败");
  }
}
xml.open("get","url","true");//url里面为请求的地址，true表示异步请求
xml.send(null)

（4）使用原生JS实现AJAX的POST请求：

var xml=new XMLhttpRequest();
xml.onreadystatechange=function(){
 if(xml.readyState==4&&xml.status==200)
 {
   var data=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

AJAX跨域技术

3. AJAX中的跨域技术

（1）跨域方式之一是代理访问。例如，通过<script></script>标签可以跨域访问JS等文件，具体示例如下：

<script src="www.abc.com/de.php?callback=dosomething"</script>

这类似于引入JS文件，但不同之处在于，JSONP方法跨域需要服务器端语言的配合支持。

（2）JSONP方法仅支持GET请求进行跨域。例如，我们有以下配置：

datatype:jsonp jsonp:callback

配合后台处理逻辑即可实现跨域访问。

(3) 利用XHR2方法，在后台进行操作从而实现跨域，支持IE9及以上版本。例如，通过设置header("Access-Control-Allow-Origin:*");和header("Access-Control-Allow-methods:POST,GET");即可实现跨域，其中*代表允许跨域的地址来源。

(4) 利用document.domain进行跨域：

在需要进行跨域的iframe中，设置相同的document.domain，例如xxx.com。

JSONP与CORS跨域解决方案

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程序设计内容对大家有所帮助。