欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-07 14:17:14
本文实例讲述了javascript和 jquery中的ajax技术。分享给大家供大家参考,具体如下: 1.什么是ajax? ajax即“asynchronous jav...

本文实例讲述了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程序设计有所帮助。