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

【javascript】Ajax核心-XMLhttpRequest

2015-08-23 20:49 781 查看
Ajax为我们提供了一种无需刷新页面就可以动态加载数据的方式，而XMLHttpRequest对象是整个Ajax的核心，缺少了它，Ajax的其余技术就无法形成一个整体。Ajax赖以生存的核心就是异步发送请求。异步发送请求是根本，不刷新页面动态加载是表面的现象。Ajax技术离开了XMLHttpRequest对象，将失去与服务器异步通信的能力。

使用XMLhttpRequest发送请求的一般步骤

（1）初始化XMLHttpRequest对象

（2）使用Open方法打开与服务器的连接。打开连接时指定发送请求的方法，采用Get或Post。指定是否采用异步方式。

（3）设置监听函数，其作用就是用于检测XMLhttpRequest状态的函数，当XMLHttpRequest的状态发生改变时，该回调函数将被触发而自动执行，而监听函数的作用就是当服务器成功响应时，去获得响应后的数据，并加载到页面中去

（4）调用Send发送请求。

XMLHttpRequest的一些方法和属性











解析服务器响应

服务器响应生成简单的文本，而XMLHttpRequest包含一个属性responseText，该属性可获取服务器响应生成的文本。在解析服务器响应之前，必须先判断服务器响应是否完成，以及响应是否正确。。为了判断服务器响应是否正确。XMLhttpRequest同样提供了两个属性：

ReadyState：判断服务器的响应状态（4表示响应完成），staus判断服务器响应的对应的状态码（200表示响应正常）

示例

html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="JS.js" type ="text/javascript"></script>
   
    <title></title>
</head>
<body>
    <label for="txt_username">
        姓名:</label>
    <input type="text" id="txt_username" />
    <br />
    <label for="txt_age">
        年龄:</label>
    <input type="text" id="txt_age" />
    <br />
      <!--当点击GET按钮时，调用JavaScript脚本（JS.js）,执行btn_click事件-->
    <input type="button" value="GET" id="btn" onclick="btn_click();" />
    <div id="result">
    </div>
   
</body>
</html>


Jacascript

function btn_click() {
    //1 初始化XMLhttpRequest
    createXMLHttpRequest();
    //得到username值
    var username = document.getElementById("txt_username").value;
   
    xmlrequest.open("get", "Handler1.ashx?username=" + username);//打开与服务器链接的地址

    //2 设置监听事件，当状态改变时执行该函数
    xmlrequest.onreadystatechange = function () {//----------------------------------------------3 获得响应，并更新页面
        if (xmlrequest.readyState == 4 && xmlrequest.status == 200)
        {
            document.getElementById("result").innerHTML = xmlrequest.responseText;
        }
    }
    //3 发送请求---------------------------------------------------------------------------------1 发送请求
    xmlrequest.send(null);
}

//实例化XMLHttpRequest,兼容浏览器
function createXMLHttpRequest()
{
    if (window.XMLHttpRequest) {
        //DOM2浏览器
        xmlrequest = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        //IE浏览器
        try{xmlrequest=new ActiveXObject("Msxml2.XMLHTTP");}
        catch (e)
        { try{xml=new ActiveXObject("Microsoft.XMLHTTP");}
            catch (e) { }}
    }
}


一般处理程序

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

namespace AjaxDemo
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)//---------------------------------------------2 处理请求
        {
           String username=context.Request.QueryString["username"];
            context.Response.ContentType = "text/plain";//设置输出流的HTTP MIME类型
      
            context.Response.Write("你好，"+username);//将一个字符串写入HTTP响应输出流---------------发送响应
            
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}


对示例的说明

首先我们在html页面中设置了一个按钮，以此来触发JS中的事件，

在JS中做了两件事情，第一件就是向服务程序发送请求，第二件事就是接受服务程序的响应，并把它加载到页面中。其中接受响应是通过设置监听事件来实现的，每当XMLHttpRequest的处理状态发生改变时就会触发一次监听事件，当服务器响应结束且响应正常时就会触发这个事件。

一般处理程序；这是服务器处理程序，JS调用的就是这个程序去处理我们请求.

总结

从执行过程中我们可以看到XMLHttpRequest为我们做的事情就是帮我们去发送请求，同时帮我们接受服务器的响应也就是说XMLHttpRequest是位于在客户端和服务器之间的。我们的所有请求的发送和响应的接受都由XMLHttpRequest帮我们托管。这就是以XMLhttprequest为核心的Ajax在为我们做的事情。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航