AJAX

AJAX："Asynchronous JavaScript and XML"

中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术
不是指一种单一的技术，而是有机地利用了一系列相关的技术：
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.

Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
与服务器之间的沟通，完全是透过Javascript 来实行
使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

XMLHttpRequest对象:异步从服务器端获取txt或者xml数据
Ajax应用程序的核心就是它。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

创建对象； - new (叫助手过来)
创建请求； - open (告诉他要去做的事情)
发送请求； - send (去吧)

先来创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意，JavaScript区分大小写。

 

为XMLHttpRequest对象设置请求参数

1.GET方式

1.1设置参数：xhr.open("GET","GetAreasByAjax.ashx?isAjax=1",true);

1.2GET方式请求可以设置浏览器不使用缓存：xhr.setRequestHeader('If-Modified-Since","0");

1.3发送：xhr.send(null);//GET方式

2.POST方式：

1.1设置参数：xhr.open("POST","GetAreasByAjax.aspx",true);

1.2添加请求头：xhr.setRequestHeader("Content-Type","application/x-www-form-urlendcoded");

1.3 发送：xhr.send("isAjax-1&na=123");//POST方式

 

设置回调函数
异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是：
创建该对象；-new
设置readystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send
注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；

编写回调函数
1.在xhr.send之前添加设置回调函数代码：
xhr.onreadystatechange = watching;

2.回调函数
function watching() {
if (xhr.readyState == 4) {//请求状态
if (xhr.status == 200) {//服务器返回的状态码
var msg = xhr.responseText; //服务器返回的字符串
} else alert("服务器错误!" + ajaxH.status);
}
}

异步对象readyState属性

readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。new完后;
1：已打开。对象已经创建并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕

常用方法
abort 取消请求
open 需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求
send 发送请求到服务器
setRequestHeader 添加自定义HTTP头到请求
getAllResponseHeaders 获取HTTP响应头的整个列表
getResponseHeader 仅获取指定的HTTP响应头

常用属性
onreadystatechange 返回或设置异步请求的事件处理程序
readyState 返回状态码：0：未初始化；1：打开；2：发送；3：正在接收；4：已加载
responseText 使用字符串返回HTTP响应
responseXML 使用XML DOM对象返回HTTP响应
status 返回HTTP状态码

 

异步对象不能访问其他域名

 <script type="text/javascript">
        window.onload = function ()
        {
            var xhr = new XMLHttpRequest();
            xhr.open("get", "http://localhost:3229/test.aspx", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = xhr.responseText;
                    alert(res);
                }
            };
            xhr.send(null);
        }
    </script>

 

jsonp

<script type="text/javascript">
        function acceptJson(jsonObj)
        {
            alert(jsonObj);
        }
        window.onload = function () {
            //alert(json.name);
        };

    </script>
    <script src="http://localhost:11560/WebForm1.aspx" type="text/javascript"></script>

可以跨域访问，但要返回js代码。

WebForm1页面

protected void Page_Load(object sender, EventArgs e)
        {
            //acceptJson 
            //string str = "var json= {id:1,name:'sss'}";//"alert('123')";//"<input type='text' name='txtName'>";
            string str = "acceptJson({id:1,name:'sss'})";
            Response.Write(str);
            Response.End();
        }