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为“名=值”对。

相关文章

  • Ajax动态加载数据库示例

    Ajax动态加载数据库示例

    这篇文章主要介绍的是一个Ajax动态加载数据库示例,需要的朋友可以参考下
    2014-05-05
  • JQuery ajax 返回json时出现中文乱码该如何解决

    JQuery ajax 返回json时出现中文乱码该如何解决

    最近有朋友反映使用jquery.ajax调用返回json时出现中文乱码,遇到此问题,非常棘手,下面小编帮大家解决JQuery ajax 返回json时出现中文乱码问题,感兴趣的朋友跟着一起了解了解吧
    2015-09-09
  • AJAX应用之草稿自动保存

    AJAX应用之草稿自动保存

    AJAX应用之草稿自动保存...
    2006-10-10
  • 解决Ajax加载JSon数据中文乱码问题

    解决Ajax加载JSon数据中文乱码问题

    这篇文章主要介绍了解决Ajax加载JSon数据中文乱码问题,需要的朋友可以参考下
    2017-10-10
  • 简单的AJAX实现(HELLO AJAX)

    简单的AJAX实现(HELLO AJAX)

    简单的AJAX实现(HELLO AJAX) ,实现代码,主要是了解下,流程。
    2010-03-03
  • 利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

    利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

    网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据,大大简化了带宽的压力
    2014-05-05
  • AJAX 用户注册时的应用实例

    AJAX 用户注册时的应用实例

    我所举的这个例子是一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。
    2008-12-12
  • Ajax xmlHttpRequest的status的值的含义

    Ajax xmlHttpRequest的status的值的含义

    虽然常写ajax方面的东西,但是很少去专门了解xmlHttpRequest的status各个值的含义,今天在开发的过程中又遇到了问题,查过资料后,将他人已总结过的转载一下,学习学习。
    2010-03-03
  • 利用ajax提交form表单到数据库详解(无刷新)

    利用ajax提交form表单到数据库详解(无刷新)

    这篇文章主要给大家介绍了关于利用ajax提交form表单到数据库(无刷新)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-02-02
  • Ajax解决多余刷新的两种方法(总结)

    Ajax解决多余刷新的两种方法(总结)

    下面小编就为大家带来一篇Ajax解决多余刷新的两种方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02

最新评论