Ajax核心——XMLHttpRequest基础

前端之家收集整理的这篇文章主要介绍了Ajax核心——XMLHttpRequest基础前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

XMLHttpRequest对象负责将用户信息以异步方式发送到服务器,并接受服务器返回的相应信息和数据。也就是可以在页面已经加载后从后从服务器请求、接收数据,这样使得用户的体验度更好,而同时提升了客户端与服务器的交互速度,AJax得以实现。故 XMLHttpRequest是Ajax技术体系中最为核心的技术,缺少了它,Ajax的其余技术就无法成为一个有机的整体。


Ajax 的XML

创建XMLHttpReques

在使用XMLHttpRequest对象发送请求和处理响应之前,首先必须使用JavaScript创建XMLHttpRequestRequest对象。
<span  style="font-family:fangSong_GB2312;font-size:18px" ><script language="javascript" type="text/javascript">
var xmlHttp;
try{
xmlHttp= new ActiveXOject("Msxml12.XMLHTTP");
}catch(_e)
{
try{
xmlHttp=new ActiveXOject("Microsoft.XMLHTTP")
}catch(_E)
{}
}

//使用其他浏览器创建XMLHttpRequest对象
if(!xmlHttp && typeof XMLHttpRequest !='underline
{
try{
xmlHttp= new XMLHttpRequest();

}catch(e){
xmlHttp=false;
}
}
</script>
</span>


属性方法

XMLHttpRequest对象提供了一系列属性方法,来向服务器端发起异步HTTP请求,监听服务器状态,并在服务器完成数据响应处理之后接收服务器端返回的信息数据。

属性方法连接:http://www.w3school.com.cn/xmldom/dom_http.asp

XML五步使用法


1、建立XMLHttpRequest对象

2、注册回调函数

3、使用Open方法设置和服务器端交互的基本信息

4、设置发送的数据,开始和服务器端交互

5、在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容


  1. <spanstyle="font-family:FangSong_GB2312;font-size:18px"><scripttype="text/javascript">
  2. varxmlhttp;
  3. functionsubmit()
  4. {
  5. if(window.XMLHttpRequest)
  6. //IE7above,firefox,chrome^^
  7. xmlhttp=newXMLHttpRequest();
  8. //为了兼容部分Mozillar浏览器,当来自服务器响应开头不是xml,导致的无法响应问题
  9. if(xmlhttp.overrideMimeType)
  10. {
  11. xmlhttp.overrideMimeType('text/xml');
  12. }
  13. }
  14. elseif(window.ActiveXObject)
  15. //IE5\IE6
  16. xmlhttp=newactiveXObject("Microsoft.XMLHTTP");
  17. if(xmlhttp==null||xmlhttp==undefined)
  18. alert("con'tcreateXMLHttpRequestObject");
  19. varuserName=document.getElementById('testText').value;
  20. //注册回调函数(错误的写法callback())
  21. xmlhttp.onreadystatechange=callback;
  22. //Get方式交互,设置服务器端交互的响应的参数
  23. //发送信息
  24. xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true);
  25. //设置向服务器端发送的数据,启动和服务器端的交互
  26. xmlhttp.send(null);
  27. //Post方式交互
  28. xmlhttp.open('POST','AjaxServer',true);
  29. xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  30. //设置向服务器端发送的数据,启动和服务器端交互
  31. xmlhttp.send('name='+userName);
  32. //定义callback函数
  33. functioncallback()
  34. //判断交互是否完成,是否正确返回,还有判断服务器端是否正确返回了数据
  35. if(xmlhttp.readyState==4&&xmlhttp.status==200)
  36. //获取服务器返回信息
  37. varmessage=xmlhttp.responseText;
  38. //得到提示信息div
  39. vartestDiv=document.getElementById('test');
  40. testDiv.innerHTML=message;
  41. </script>
  42. </span>

本篇博客简单总结了一下XMLHttpRequest对象的一些基本知识,积累理论,实践应用。通过学习XMLHttpRequest对象也体会出了BS的优势,发布简单方便,灵活,用户体验度好。

原文地址点击打开链接

猜你在找的Ajax相关文章