AJAX / XHR :XMLHttpRequest对象

前端之家收集整理的这篇文章主要介绍了AJAX / XHR :XMLHttpRequest对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax在我之前的博客中,多多少少已经提起一点了,今天介绍下Ajax中XMLHttpRequest对象。



Ajax 通俗地讲可以实现网页的局部刷新,减轻服务的负荷量,给用户更好的体验度。



Ajax的工作原理:Ajax可以通过回调函数的使用,在获取服务器的数据后,实现部分加载的功能。如图:







XHR(xmlhttprequest)是Ajax的核心对象。其实就是Ajax实例化的执行者,很多方法属性需要由它来执行。



那么XHR具体实如何来实现局部刷新的呢?分五步:



1.建立XHR对象。



2.注册回调函数



3.使用open()方法设置和服务交互的基本信息。



4.使用send()方法设置发送的数据,开始和服务器交互。



5.在回调函数中判断交互状态readystate,更新页面


其中需要注意的几点:



1.建立XHR对象很简单variable = new XMLHttpRequest(),但是需要兼容不同的浏览器:


  var xmlhttp;
if(window.XMLHttpRequest)
  {
// 兼容 IE7+,Firefox,Chrome,Opera,Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {
// 兼容 IE6,IE5
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  }

2.Open 方法的参数设置:



Open(method,URL,async):



Method:表示请求服务的类型,分为get 和 post 两种。



URL:表示要存储文件在服务器上的位置。如果是采用数据库则要确定到数据库的【.mdb】的位置。如果是在项


目中自己建立的servlet容器或者xml存储文件,则确定要项目中对应的位置即可。


3.XMLHttpRequest对象的属性



responseText:表示返回字符串形式的数据;



responseXML:表示返回xml形式的数据;



onreadystatechange:存储函数,当有readystate属性改变时,就会调用函数



readystate:



0 :请求未初始化;



1 :服务器已经建立连接;



2 :请求已经接收;



3 :请求处理中;



4 :请求已经完成,且响应就绪;


Status:



200 :“OK”



@R_301_448@ :未找到页面



当readystate 等于4且状态为200 时,表示向服务器提交的请求已经反馈回来且准备就绪。


总结:



Ajax 是一项用于创建web 交互的技术,它是写在JS 文件中的,通过对HTML中元素注册特殊事件,在JS 中和数



据库进行交互,同时使用回调函数完成局部刷新(其实就是在HTML中先写一个容器div或其他,然后通过Ajax的五步



骤,将返回的数据装入到d容器中,因为本来容器就是存在的,所以看上去好像并不突兀,也没有整个页面提交)。



目前对Ajax的学习还比较浅,有不对的请多指教。

猜你在找的Ajax相关文章