简易解析ajax,javascript-XMLHttpRequest
XMLHttpRequest可以提供不重新加载页面的情况下更新网页
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src="jquery-1.7.min.js" type="text/javascript"></script>
- <title>解析XMLHttpRequest</title>
- </head>
- <body>
- <form runat="server">
- <div>
- <input type="text" name="search" />
- <input type="button" name="go" value="搜索" />
- <div ></div>
- </div>
- </form>
- </body>
- </html>
- <script type="text/javascript">
- var xhr = null;
- $(function () {
- $("#go").click(function () {
- var str = $("#search").val();
- if ($.trim(str) == "") {
- $("#result").html("请输入要搜索的内容.");
- }
- else {
- _search(str);
- }
- });
- });
- function _search(str) {
- // 对于 IE7+, Firefox, Chrome, Opera, Safari
- if (window.XMLHttpRequest) {
- xhr = new XMLHttpRequest();
- }
- //对于 IE6, IE5
- else if (window.ActiveXObject) {
- xhr = new ActiveXObject("Microsoft.XMLHTTP");
- }
- else {
- //xhr = new ActiveXObject("Msxml2.XMLHTTP");
- $("#result").html("您的浏览器不支持XMLHttpRequest");
- }
- xhr.onreadystatechange = _CallBack;
- xhr.open("post", "/Search.aspx?q=" + str, true);
- xhr.send();
- }
- function _CallBack() {
- if (xhr.readyState == 4 && xhr.status == 200) {
- $("#result").html(xhr.responseText);
- }
- }
- </script>
//search.aspx.cs
- using System;
- namespace MyAjax
- {
- public partial class Search : System.Web.UI.Page
- {
- protected override void OnPreInit(EventArgs e)
- {
- if (!IsPostBack)
- {
- if (Request.QueryString["q"] != null)
- {
- string str = Request.QueryString["q"].ToString().Trim();
- //清空输出
- Response.Clear();
- //设置页面无缓存
- Response.Buffer = true;
- Response.ExpiresAbsolute = System.DateTime.Now.AddSeconds(-1);
- Response.Expires = 0;
- Response.CacheControl = "no-cache";
- Response.AppendHeader("Pragma", "No-Cache");
- Response.Cache.SetNoStore();
- Response.ClearContent();
- //输出
- Response.Write("您是不是要找：<br />" + str);
- //结束输出
- Response.End();
- }
- }
- }
- }
- }
//方法
abort()
取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
getAllResponseHeaders()
把 HTTP 响应头部作为未解析的字符串返回。
如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "" 隔开。
getResponseHeader()
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
open()
//open(method, url, async, username, password)
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
send()
发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
setRequestHeader()
向一个打开但未发送的请求设置或添加一个 HTTP 请求。
//属性
状态 | 名称 | 描述 |
0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
1 | Open | open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
2 | Send | Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
4 | Loaded | HTTP 响应已经完全接收。 |