您的位置：首页 > 理论基础 > 计算机网络

简易解析ajax,javascript-XMLHttpRequest

2013-11-22 11:20 495 查看

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 id="form1" runat="server">

<div>

<input type="text" name="search" id="search" />

<input type="button" name="go" id="go" value="搜索" />

<div id="result"></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 响应已经完全接收。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航