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 二维数组的实现与应用
Mar 16 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
React中使用UMEditor的方法示例
Dec 27 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP中phar包的使用教程
2017/06/14 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python多线程和队列操作实例
2015/06/21 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
Django-imagekit的使用详解
2020/07/06 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
擅自离岗检讨书
2014/02/11 职场文书
红旗方阵解说词
2014/02/12 职场文书
网管求职信
2014/03/03 职场文书
运输服务质量承诺书
2014/03/27 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
先进个人申报材料
2014/12/30 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
搭建Yolov5服务器
2022/04/30 Servers