AJAX原始对象的使用(XMLHttpRequest+javas
2018-03-08 本文已影响0人
吾兹有
文章摘自：http://blog.csdn.net/jiben2qingshan/article/details/17251205
什么是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;
}
}
