AJAX原始对象的使用(XMLHttpRequest+javascript+asp.net)

发布时间：2020-12-16 00:45:57 所属栏目：百科来源：网络整理

导读：什么是AJAX AJAX是一个结合体，通过整合旧的技术，实现的的一种新思想，AJAX = 异步 + javascript + xml。传统方式web应用和AJAX方式Web应用的比较传统方式页面为全页面刷新；同步响应，用户体验会中断；页面交互为主导；主要代码工作是服务器端 AJAX方式

什么是AJAX

AJAX是一个结合体，通过整合旧的技术，实现的的一种新思想，AJAX = 异步 + javascript + xml。

传统方式web应用和AJAX方式Web应用的比较

传统方式

页面为全页面刷新；同步响应，用户体验会中断；页面交互为主导；主要代码工作是服务器端

AJAX方式

页面为局部刷新；异步响应方式，用户体现连贯；数据交互为主导；页面端需要更多的代码工作

浏览器进行传统方式和AJAX方式交互的大致流程

浏览器之所以可以进行AJAX方式交互，是因为浏览器有AJAX引擎，在具体编程中的体现是有了XMLHttpRequest对象。

XMLHttpRequest对象

XMLHttpRequest对象是编程中处于最底部的对象，通过JavaScript脚本我们可以操作，当然，为了方便使用，人们已经将XMLHttpRequest对象封装到JQuery中了。本篇博客不说(之后会说)JQuery的方式。

XMLHttpRequest对象的使用

XMLHttpRequest对象是最原始的对象，早期浏览器对其的支持也是不尽相同，如：早期的IE浏览器，通过
ActiveX控件名进行创建和使用，更头疼的是，在那个时期，不同版本IE的ActiveX控件名称也是不同的，这个在当时对于浏览器兼容方面造成了一定的麻烦(现在我们可以使用JQuery避免这些麻烦)。

XMLHttpRequest对象的实例

下面的实例基于C#语言，运用asp.net在2010 VS 环境下做的。

A.aspx(A.aspx.cs中没有写代码)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="AJAX_A" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>传送数据</title>
        <script type="text/javascript">
            //定义全局变量
            var xmlhttp;

            //自定义函数
            function submit() {
                alert("开始执行！");
               //准备传送的数据。使用dom的方式获取文本框中的值
               var userName = document.getElementById("userName").value;


               //1、创建XMLHttpRequest对象
               if (window.XMLHttpRequest) {
                   alert("进入创建XMLHttpRequest对象的代码块！");
                   //code for IE 7+,FireFox,Chrome,Opera,Safari
                   xmlhttp = new XMLHttpRequest();
                   //针对某些特定版本的mozillar浏览器的bug进行修正
                   if (xmlhttp.overrideMineType) {
                       xmlhttp.overrideMineType("text/xml");
                   }                   
               } else if (window.ActiveXObject) {
                   alert("进入创建ActiveXObject对象的代码块！");
                   //针对IE 6-
                   //用于创建XMLHttpRequest对象的控件名称保存在数组中
                   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){
                           //目的：不让异常继续上抛让程序继续执行循环
                       }
                   }                   
               }
               //验证XMLHttpRequest对象是否创建成功
               if (xmlhttp == undefined || xmlhttp == null) {
                   alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器！");
                   return;
               }
               //验证对象是否创建成功
               alert("对象创建成功！");

               //2、注册回调函数
               //注册的为函数名，不是函数名()
               xmlhttp.onreadystatechange = callbackFunctionName;


               //3、设置连接信息
               //第一个参数表示http的请求方式：post和get
               //第二个参数表示请求的url地址，get方式传送的数据在url中
               //第三个参数表示采用异步还是同步方式交互，true表示异步

               //get方法请求的代码
               xmlhttp.open("GET","B.aspx?name=" + userName,true);

               ////post方式请求的代码
               //xmlhttp.open("POST","B.aspx",true);
               ////post方式需要自己设置http的请求头，之前浏览器会自动添加
               //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
               

               //4、发送数据，开始和服务器端进行交互
               //同步方式下，send这句话会在服务器端数据回来后才执行完
               //异步方式下，send这句话会立即完成执行
               
               //get方式数据的方法
               xmlhttp.send(null);

               ////post方式发送数据
               //xmlhttp.send("name" + userName);


               //5、接受数据后的操作。回调函数
               function callbackFunctionName() {
                   //readyState：请求状态
                   //0：未初始化；1：open方法成功调用之后；2：服务器已经应答客户端的请求；3：交互中。Http头信息已经接收，相应数据尚未接收；4：完成。数据接收完成 
                   alert(xmlhttp.readyState);                   
                   //判断对象的状态是交互完成
                   if (xmlhttp.readyState == 4) {
                       //判断http的交互是否成功。200：表示成功；404表示“未找到”
                       if(xmlhttp.status == 200){
                           //获取服务器端返回的数据
                           //获取服务器端输出的纯文本数据
                           var responseText = xmlhttp.responseText;
                           //将数据显示在页面上
                           //通过dom的方式找到div标签所对应的元素节点
                           var divNode = document.getElementById("result");
                           //设置元素节点中的html内容
                           divNode.innerHTML = responseText;                           
                       } else{
                           alert("出错了！！！");
                       }
                   }
               }
            }
        </script>
    </head>
    <body>
        <input id="userName" type="text" />
        <input id="Submit1" type="submit" value="submit" onclick="submit();" />
        <div id="result"></div>
    </body>
</html>

B.aspx.cs代码(b.aspx中没有写相应的代码)

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

public partial class AJAX_B : System.Web.UI.Page
{
    protected void Page_Load(object sender,EventArgs e)
    {
        //获取请求的参数Get方式
        if (!String.IsNullOrEmpty(Request.QueryString["name"])){
            string resultType = Request.QueryString["name"].ToLower() == "html" ? "html" : "json";
            string html = GetResult(resultType);
            //清空缓冲区
            Response.Clear();
            //将字符串写入响应输出流
            Response.Write(html);
            //将当前所有缓冲的输出发送的客户端，并停止该页执行
            Response.End();
        }
        //post方式：Request.Form["name"].toString()获得数据        
    }

    //自定义返回数据函数
    public string GetResult(string resultType){
        string result="";
        if(resultType == "html"){
            //返回的html
            result = "<ul><li id='1'>北京</li><li id='2'>天津</li></ul>";
        }
        else if(resultType == "json"){
            //返回的json数据
            result = "";                
        }
        return result;
    }
}

总结

该博客中有些东西没有写，像json，jquery，*.ashx，后面的博客会对这些做些介绍。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!