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

前端之家收集整理的这篇文章主要介绍了javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了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对象的构建如下:

对于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请求:

(4) 用原生JS实现post请求:

为什么要设置请求头信息:

默认情况下,Ajax以content-type:text/plain,方式来提交数据,此时服务器将忽略post实体部分的数据,所以服务器无法获得post请求中的数据。

解决方法

3.AJAX中的跨域技术

(1).跨域的方式有首先是代理访问。这个方法可以跨域访问JS等文件,比如说

PHP?callback=dosomething"

就像引入JS一样,但是不同的是,JSONP方法跨域需要服务器端语言的配合。

(2).只能用于GET方法的jsonp方法,进行跨域比如我们有

然后加上后台处理即可!~

(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的标签可以跨域

比如

猜你在找的Ajax相关文章