什么是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，后面的博客会对这些做些介绍。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
