Ajax学习小记

AJAX简介

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest对象

XMLHttpRequest对象定义了用脚本操作HTTP的API,除了常用的GET请求,这个API还包含实现POST请求的能力,
同时他能用于文本或Document对象的形式返回服务器的响应.
下面是 XMLHttpRequest 对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化               open()尚未调用
  • 1: 服务器连接已建立          open()已经调用
  • 2: 请求已接收                 接收到头信息
  • 3: 请求处理中                 接收到响应主体
  • 4: 请求已完成,且响应已就绪      响应完成
status 200: “OK”404: 未找到页面

HTTP简介

HTTP请求由四部分组成:
1.请求的方法或动作 “GET”,”POST”
2.请求的URL
3.可选的请求头集合.”User-Agent”,”Content-type”
4.请求主体
服务器返回的HTTP响应包含三部分:
1.一个数字和文字组成的状态码 “status”,404,200,301,302,403
2.一个响应头集合.
3.响应主体.

发起请求

发起Http请求时调用XMLHttpRequest对象的open()方法.该方法必须指定两个部分,请求方法和URL,
request.open(method,’url’)
method可以使”POST”,也可以是”GET”.也可以是”DELETE”,”PUT”等
如果是POST请求的话必须要设置”Content-type”头来指定请求主题的MIME类型:
request.open(“POST”,”ajax_test.asp”,true);
request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
最后一步是指定可选的请求主体并向服务器发送,使用send()方法
request.send(null);
GET请求绝对没有主体,所有应该传递null或省略这个参数.POST请求通常拥有主体.
HTTP请求的各部分有指定顺序:请求方法和URL首先到达,然后是请求头,最后是请求主体.XMLHttpRequest实现通常知道调用send()方法猜开始启动网络.

取得响应

一个完整的HTTP响应由状态码,响应头集合,响应主体.组成,这些都可以通过XMLHttpRequest对象的属性和方法使用.
XMLHttpRequest对象通常异步使用:发送请求后,send()方法立即返回,直到响应返回,前面列出的响应方法和属性才有效,为了在响应准备就绪时得到通知,必须监听XMLHttpRequest对象上的readystatechange事件
readyState是一个整数,它指定了HTTP请求的状态.
理论上,每次readyState属性改变都会触发readystatechange事件.实际中,当readyState改变为0或1时可能没有触发这个事件.所有事件处理程序应该一直检验readyState值.可以把事件处理函数设置为XMLHttpRequest对象的onreadystatechange属性.

测试程序

GET方法

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ajax</title>
    <script type="text/javascript">
        var xmlhttp = null;
        var console = null;
        function openAjax() {
            console = document.getElementById("console");

            if (xmlhttp == null) {
                createXMLHttpRequest();
            }
            var val = document.getElementById("txt").value;
            xmlhttp.open("GET", "ajaxcheck.aspx?name=" + val, true);
            xmlhttp.onreadystatechange = xmlHttpChange;
            xmlhttp.send(null);
            document.getElementById('resultSpan').innerHTML = '正在检查,请稍候...';
           
        }

        function createXMLHttpRequest() {

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        function xmlHttpChange() {

            toConsole(xmlhttp.readyState)
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var res = xmlhttp.responseText;
                    document.getElementById('resultSpan').innerHTML = res;
                }
            }
        }

        function toConsole(data) {
            if (console != null) {
                var newline = document.createElement("div");
                console.appendChild(newline);
                var txt = document.createTextNode(data);
                newline.appendChild(txt);
            }
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            用户名:<input type="text" id='txt' value="Sandy" onblur="openAjax();" />
              <span id="resultSpan"></span>
            <div id="console"></div>
        </div>
    </form>
</body>
</html>

ajaxcheck.aspx主要內容

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

namespace javascript
{
    public partial class ajaxcheck : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string value = Request.QueryString["name"] == null ? "" : Request.QueryString["name"];
            string str = DateTime.Now.ToLongDateString();

            Response.Write(str + " " + value);

        }
    }
}

POST方法

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My JavaScript</title>

    <script type="text/javascript">
      
        var dzb="name=name"
        function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }

            xmlhttp.open("POST", "WebForm1.aspx", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send(dzb);
        }
    </script>
</head>
<body>

    <button type="button" onclick="loadXMLDoc()">请求数据</button>

    <div id="myDiv"></div>
</body>
</html>

WebForm1.aspx主要內容

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

namespace javascript
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
            string str1 = Request.Form["name"] == null ? "" : Request.Form["name"].ToString();

            Response.Write("hello world"+str1);
        }
    }
}

Ajax学习小记》上有2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注