zoukankan      html  css  js  c++  java
  • 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实践,就会发现其实这个挺容易理解的。


  • 相关阅读:
    C++ STL 一般总结(转载)
    Python高级语法总结
    Adaboost 算法的原理与推导——转载及修改完善
    简化版SMO算法标注
    【转载】机器学习算法基础概念学习总结
    C++中添加配置文件读写方法
    Python中scatter()函数--转载
    python 之 strip()--(转载)
    zabbix邮件报警脚本(Python)
    Linux常用命令
  • 原文地址:https://www.cnblogs.com/victor-grace/p/7253776.html
Copyright © 2011-2022 走看看