javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】


Posted in Javascript onDecember 15, 2016

本文实例讲述了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 相关文章推荐
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 #Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 #Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 #Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 #Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 #Javascript
JavaScript实现Fly Bird小游戏
Dec 15 #Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
element el-input directive数字进行控制
2018/10/11 Javascript
js实现导航跟随效果
2018/11/17 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python查看模块安装位置的方法
2018/10/16 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python 导入数据及作图的实现
2019/12/03 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
毕业生自荐书
2013/12/18 职场文书
直接有效的自我评价
2014/01/11 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
幼儿园小班评语
2014/04/18 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python