AJAX之XMLHttpRequest对象

      AJAX是一种创建交互式网页应用的网页开发技术,是异步Javascript和XML的集合。其核心是XMLHttpRequest对象,可以在不向服务器端提交整个页面的情况下,实现局部更新网页,它是AJAX的Web应用程序架构的一项关键技术。

      基本属性: 

属性 描述
readyState
表示XMLHttpRequest对的状态


0表示未初始化。对象已创建,未调用open

1表示open方法成功调用,send方法未调用

2表示send方法调用,尚未开始接收数据

3表示正在接收数据,http响应头信息已经接收,响应数据尚未接收完成

4表示完成,响应数据接收完成。

onreadystatechange
请求状态改变的事件触发器(readyState变化时会调

用这个属性上注册的
Javascript函数)。

responseText
服务器响应的文本内容

responseXML
服务器响应的XML内容对于的DOM对象

status
服务器返回的http状态码


200表示成功,404表示未找到,500表示服务器内部错误

statusText
服务器返回状态码的文本信息

       


      基本方法:

方法 描述
open(String method,String url,boolean asynch,String username,String password)
指定和服务器端交互的HTTP方法,URL地址及其他请求信息。

其中,method表示HTTP请求方法,支持所有http方法,
一般使用“GET”,“POST”

url表示请求的服务器地址

asynch表示是否采用异步方式,true表示异步,false表示同步

后两个参数可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码,一般为null
send(content)
向服务器发出请求,如果采用异步方式,该方法会立即返回。

Content可以不指定或者指定为null表示不发送数据
setRequestHeader(String header,String value)
设置HTTP请求中的指定头部header的值为value


此方法需要在open方法之后调用
getAllResponseHeaders()
返回包含HTTP的所有响应头信息,其中响应头包括Content-Length、Date、URI等内容


返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号隔开,每一组键之间用CR和LF(回车加换行符)来分隔
getResponseHeader(String header)
返回HTTP响应头中指定的键名header对应的值
abort()
停止当前http请求,对应的XMLHttpRequest对象会复位到未初始化的状态

     XMLHttpRequest五步法:       

          第一:创建XMLHttpRequest对象
       第二:注册回调函数
       第三:设置和服务器交互的参数
       第四:设置向服务器端发送的数据,启动和服务器端的交互
       第五:判断和服务器端的交互是否完成,还有判断服务器端是否返回正确的数据

   HTML代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" >
        var xmlhttp;
        function submit() {            
            //1、创建XMLHttpRequest对象
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMineType) {//针对某些特定版本的mozillar浏览器的BUG进行修正  
                    //将覆盖发送给服务器的头部,强制 text/xml 作为 mime-type
                    xmlhttp.overrideMineType("text/xml");
                }
            } else if (window.ActiveXObject) {//针对IE浏览器进行处理
                var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0",
            "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
            "MSXML2.XMLHTTP", "Miscrosoft XMLHTTP"];
                for (var i = 0; i < activexName.length; i++) {
                    try{
                        xmlhttp=new ActiveXObject(activexName[i]);
                        break;
                    } catch (e) { }
                }
            }

            if (xmlhttp == undefined || xmlhttp == null) {
                alert("当前浏览器不支持插件XMLHttpRequest对象,请更换浏览器");
                return;
            }

            //2、注册回调函数
            xmlhttp.onreadystatechange = callback;
            //获取当前值
            var username = document.getElementById("userName").value;
            //设置字符串参数,并进行编码(用于POST提交方式)
            var args = "username=" + encodeURIComponent(username);

            //GET 交互
            //3、设置和服务器端交互的参数
            //xmlhttp.open("GET", "XMLHttpRequest.aspx?username=" + username, true);

            //POST交互
            //3、设置和服务器端交互的参数
            //使用Post方式不用担心缓存
            xmlhttp.open("POST", "XMLHttpRequest.aspx?username=" + username, true);
            //设置Content-Type类型,告知服务器实体中有参数
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            //4、设置向服务器端发送的数据,启动和服务器端的交互
            //用于GET提交
            //xmlhttp.send(null);
            //用于POST提交
            xmlhttp.send(args);

            function callback() {
                //5、判断和服务器端的交互是否完成,还有判断服务器端是否正确返回了数据
                if (xmlhttp.readyState == 4) {//readyState=4表示交互完成
                    if (xmlhttp.status == 200) {//status=200表示正确返回了数据
                        //纯文本数据的接收方法
                        var message = xmlhttp.responseText;
                        var div = document.getElementById("message");
                        div.innerHTML = message;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="userName" />
    <input type="button" value="用户名校验" onclick="submit()" />
    <br />
    <div id="message"></div>
</body>
</html>

     aspx中的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace XMLHttpRequest五步法
{
    public partial class XMLHttpRequest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Response.Clear();
            //获取当前值,get提交使用Request.QueryString方法
            //string username = Request.QueryString["username"];
            //POST提交,使用Request.Form
            string username = Request.Form["username"];

            Response.Write("姓名:'"
                + username + "'<br/>时间:'" + DateTime.Now.ToString() + "'");
            Response.End();
        }
    }
}

    总结:

     XMLHttpRequest是AJAX的核心部分,需要好好理解。刚开始接触的时候,有些不明白是怎么回事,而且视频中讲的也是原生的AJAX,表面上看来不太好理解,但是通过具体的demo实践,就会发现其实这个挺容易理解的。


原文地址:https://www.cnblogs.com/victor-grace/p/7253776.html