本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考，具体如下：

1.什么是AJAX？

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

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

2.AJAX在原生JS中的实现

尽管随着JS框架的盛行，在jQuery中，实现AJAX过程相当简单，但是对于一些不需要加载jQuery这种庞大插件的项目中，还是要采用AJAX的原生实现！

要实现原生JS的AJAX过程，对于高版本浏览器，支持JS中的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：表示请求过程中的状态说明，

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实现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

3.AJAX中的跨域技术

（1）.跨域的方式有首先是代理访问。<script></script>这个方法可以跨域访问JS等文件，比如说

<script src="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程序设计有所帮助。

# javascript  # jQuery  # AJAX  # 跨域  # jQuery Ajax File Upload实例源码  # jQuery Ajax请求后台数据并在前台接收  # PHP+jquery+ajax实现分页  # AJAX和jQuery动态加载数据的实现方法  # Jquery通过ajax请求NodeJS返回json数据实例  # 用jQuery的AJax实现异步访问、异步加载  # jquery ajax后台返回list  # 前台用jquery遍历list的实现  # jQuery中ajax的4种常用请求方式介绍  # jQuery中$.ajax()方法参数解析  # 概述jQuery中的ajax方法  # 客户端  # 的是  # 来实现  # 回调  # 情况下  # 加载  # 还没有  # 会有  # 相关内容  # 就像  # 多个  # 不需要  # 有很多  # 是指  # 遍历  # 只需  # 感兴趣  # 数据结构  # 给大家  # 并将 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Java Adapter 适配器模式（类适配器，对象适配器）优缺点对比  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  javascript基于原型链的继承及call和apply函数用法分析  EditPlus中的正则表达式 实战(2)  简历没回改：利用AI润色让你的文字更专业  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  如何快速搭建安全的FTP站点？  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  如何彻底删除建站之星生成的Banner？  如何快速搭建二级域名独立网站？  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  Laravel怎么连接多个数据库_Laravel多数据库连接配置  iOS UIView常见属性方法小结  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  魔方云NAT建站如何实现端口转发？  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  如何快速建站并高效导出源代码？  iOS验证手机号的正则表达式  网站制作价目表怎么做,珍爱网婚介费用多少？  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  装修招标网站设计制作流程,装修招标流程？  如何用景安虚拟主机手机版绑定域名建站？  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  青岛网站建设如何选择本地服务器？  如何构建满足综合性能需求的优质建站方案？  如何用5美元大硬盘VPS安全高效搭建个人网站？  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  ,怎么在广州志愿者网站注册？  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  海南网站制作公司有哪些,海口网是哪家的？  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  Internet Explorer官网直接进入 IE浏览器在线体验版网址  高防服务器租用首荐平台，企业级优惠套餐快速部署  详解Android中Activity的四大启动模式实验简述  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  网站建设保证美观性，需要考虑的几点问题！  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  香港服务器选型指南：免备案配置与高效建站方案解析  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  做企业网站制作流程,企业网站制作基本流程有哪些？  原生JS获取元素集合的子元素宽度实例  如何在云主机快速搭建网站站点？  如何快速上传建站程序避免常见错误？  java ZXing生成二维码及条码实例分享  如何在Windows 2008云服务器安全搭建网站？