AJAX学习

什么是AJAX？

AJAX实际上是在不重新加载整个页面的前提下，对页面的局部进行刷新、重新加载，使网页实现异步更新

工作原理

简单来说，
第一步，因为用户的操作，发生了某个事件，比如提交表单，浏览器会创建一个 XMLHttpRequest 对象（这个应该是XML的一种对象吧，我也不是很确定具体时间什么意思，但从英文来看，就是http请求对象），并把这个对象发送给服务器。
第二步，服务器接收到请求并处理，把所需数据返回浏览器
第三步，浏览器接收数据，使用js处理，更新内容

简单的步骤如下：
创建XMLHttpRequest对象 ----->向服务器发送请求----->服务器响应回传，浏览器接收

创建XMLHttpRequest对象

适用于所有浏览器的代码：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

在创建XMLHttpRequest对象后，发送请求所用方法为：

• xmlhttp.open("GET/POST","url","true/false")
• xmlhttp.send(string)

xmlhttp.open()：

1. GET/POST：
   大部分使用GET方法，因为GET更快。当出现以下几种情况使用POST：
   无法使用缓存文件（更新服务器上的文件或数据库）
   向服务器发送大量数据（POST 没有数据量限制）
   发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2. url：
   文件地址

3. true/false：
   第三个参数指的是是否异步，基本上用在AJAX上都会设置成true

xmlhttp.send()：
xmlhttp.send()可以把GET请求发送到服务器
xmlhttp.send(string)只能发送POST请求，string是使用POST时想要发送的数据

http中GET 和POST 区别：HTTP方法

服务器响应

浏览器怎么获得服务器的响应数据？并针对不同类型做不同处理呢？

• responseText：获得字符串形式的响应数据
• responseXML：获得XML形式的响应数据

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

我们如何判断 Http请求成功发送，并且服务器已响应 呢？

我们可以使用 onreadystatechange 事件
readyState存储了当前http请求的状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
而当readyState改变时，就会调用onreadystatechange函数。
status代表页面的状态：
200: “OK”
404: 未找到页面

---

所以我们一般用以下代码代表响应已就绪：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

jQuery-AJAX

load方法

$(selector).load(url,data,callback);

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

URL参数中也可以包含一些选择器，比如"demo_test.txt #p1"。

callback回调函数包括：

• responseTxt ：包含调用成功时的结果内容
• statusTxt ：包含调用的状态
• xhr ：包含 XMLHttpRequest对象

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });

get和post方法

$.get(URL,callback)通过 HTTP GET 请求从服务器上请求数据。
callback函数：function(data,status)

---

$.post(URL,data,callback)通过 HTTP POST 请求向服务器提交数据。

$.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });

如果学到更多框架，持续更新中。。