ajax的工作原理以及异步请求的封装介绍
更新时间：2013年09月23日 09:13:47 作者：
客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前注册的回调函数，异步请求不会阻塞客户端的操作，达到页面无法刷新就可以更新数据的效果
Ajax原理：
客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前注册的回调函数，在回调函数中可以使用javascript操作DOM来更新页面，异步请求不会阻塞客户端的操作，达到页面无法刷新就可以更新数据的效果。
异步请求的封装：
var xhr=false;
//step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象
if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
if (window.ActiveXObject) { //IE浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5+
}
}
//step2:设置回调函数
xhr.onreadystatechange = myCallback;
//step3:创建一个异步请求
xhr.open("method", "url", true);
//如果是post：要设置请求消息体数据的编码方式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//step4:发送异步请求
xhr.send(content); //如果是get方式 content为null，若为post，content为“名=值”对。
客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前注册的回调函数，在回调函数中可以使用javascript操作DOM来更新页面，异步请求不会阻塞客户端的操作，达到页面无法刷新就可以更新数据的效果。
异步请求的封装：
复制代码 代码如下:
var xhr=false;
//step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象
if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
if (window.ActiveXObject) { //IE浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5+
}
}
//step2:设置回调函数
xhr.onreadystatechange = myCallback;
//step3:创建一个异步请求
xhr.open("method", "url", true);
//如果是post：要设置请求消息体数据的编码方式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//step4:发送异步请求
xhr.send(content); //如果是get方式 content为null，若为post，content为“名=值”对。
相关文章
今天小编就为大家分享一篇解决ajax传过来的值后台接收不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文主要介绍了ajax用json实现数据传输的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
比较实用的js拖动效果代码。类的写法不错，是个不错的应用2008-06-06
这篇文章主要介绍了全面解析Ajax和jsonp使用总结 的相关资料,需要的朋友可以参考下2017-10-10
在layer弹出层中通过ajax返回html拼接字符串填充数据的方法
这篇文章主要介绍了在layer弹出层中通过ajax返回html拼接字符串填充数据的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了如何创建ajax对象并兼容多个浏览器,需要的朋友可以参考下2014-06-06
本文讲解的是怎么利用ajax实现跨域请求，那么知道“同源策略”，就可以解决很多疑问：“为毛我的ajax加载不了数据！”“为毛浏览器控制台会对我如此漂亮的代码报错！”这就是我们今天要主要探讨的内容了。2015-03-03
Ajax并不神秘：揭下各种Ajax控件和类库的小裤衩...2007-03-03
AJAX开发者的最新工具和技术...2006-09-09
这篇文章主要介绍了Ajax基础使用详解，是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具，本篇就来对ajax基础进行详细讲解,需要的朋友可以参考下2023-05-05
最新评论