XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能
1.创建对象
不同的浏览器使用不同的方法来创建XmlHtttpRequest
IE 使用ActiveXObject 其他浏览器使用的是XMLHttpRequest的JavaScript的内建对象
var XMLHttp=null; if (window.XMLHttpRequest) { XMLHttp=new XMLHttpRequest() }else if (window.ActiveXObject) { XMLHttp=new ActiveXObject("Microsoft.XMLHTTP") }
改进的例子
一些程序员喜欢使用最新最快的版本的 XMLHttpRequest 对象。
下面的例子试图加载微软最新版本的 "Msxml2.XMLHTTP",在 Internet Explorer 6 中可用,如果无法加载,则后退到 "Microsoft.XMLHTTP",在 Internet Explorer 5.5 及其后版本中可用。
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
2.XmlHttpRequest对象的方法
方法 | 描述 |
abort() | 停止当前请求 |
getAllResponseHeaders() |
把HTTP请求的所有响应首部作为键/值对返回 |
getAllResponseHeaders(head_name) |
返回指定首部的串值 |
open(method,url,asynch) |
建立对服务器的调用。Method参数可以是get或者post。url参数可以是相对url或绝对url。asnych参数是一个布尔值,true为异步方式,false为同步方式。默认为true |
send(string) |
向服务器发送请求 string:仅用于POST请求 |
setRequestHeader(head_name,value) |
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
GET还是POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
3.XmlHttpRequest对象的属性
属性 |
描述 |
onreadystatechange |
每个状态改变时都会触发这个事件处理器,通常会调用一个javascrpt函数 |
readyState |
请示的状态。有5个可取的值: 0:未初始化 1:正在加载 2:已加载 3:交互中 4:完成 |
responseText |
服务器的响应,表示为一个字符串 |
responseXML |
服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status |
服务器的HTTP状态码。 200对应OK 404对应Not Found(未找到) |
statusText |
HTTP状态码的相应文本(OK或Not Found(未找到)) |
例:
前台关键代码
function getJson() { //创建xmlHttpRequest对象,不考虑浏览器兼容性问题 var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", "GetJson.ashx"); //利用Get提交方式不需要向服务器端提交数据 xmlHttp.send(null); //监听服务器端请求状态的改变事件 xmlHttp.onreadystatechange = function() { //客户端与服务器端交互完成,服务器端返回数据给客户端 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //获取服务器端返回的JSON对象 var list = eval(xmlHttp.responseText); //循环遍历JSON对象 for (var i = 0; i < list.length; i++) { str += "<li>学号:" + list[i].stuNo + "姓名:" + list[i].stuName + "</li>"; } str += "</ul>"; } document.getElementById("msg").innerHTML = str; str = ""; //清空str接受的值 } }
//创建数据上下文对象 private DBDataContext db = new DBDataContext(); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; db.DeferredLoadingEnabled = false; var list = db.GetTable<stuInfo>().ToList(); JavaScriptSerializer js = new JavaScriptSerializer(); context.Response.Write(js.Serialize(list)); }
XmlHttpRequest 对象的用法,布布扣,bubuko.com
原文:http://www.cnblogs.com/mynewstart/p/3770139.html