简易解析ajax,javascript-XMLHttpRequest,解决乱码问题

XMLHttpRequest可以提供不重新加载页面的情况下更新网页

乱码主要是由于js中文传参影响的

解决方法:

                 xhr.open("post", "/Search.aspx?q=" + encodeURI(str), true);

<!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="ajax" name="ajax" method="post" 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) {
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    xhr = new XMLHttpRequest();
                } catch (e) {
                    alert("您的浏览器不支持ajax.");
                }
            }
        }
        xhr.onreadystatechange = _CallBack;
        xhr.open("post", "/Search.aspx?q=" + encodeURI(str), true);
        xhr.send(null);
    }
    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 = Server.UrlDecode(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 响应已经完全接收。









發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章