这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 javascript 和 jQuery 中的 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 对象的构建如下:
- 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0430/329518.html