学习Ajax

什么是Ajax

说白一句，Ajax它是在不用重新加载整个网页情况下，（因为传统的网页加载内容，必须要重载整个页面）能够实现部分网页的更新的技术。

基本工作原理简述

在浏览器上，有一个网页在发生着，网页上的某部分需要加载或者其它需要请求服务器上的数据的交互，我们就会创建一个XMLHttpRequest对象，然后发送一个httprequest通过internet去服务器端，服务器端处理收到的请求，然后产生一个响应并将数据通过internet发送回浏览器，浏览器通过JavaScript处理数据，并作出更新。
有必要解释的几个名词：1、XMLHttpRequest对象：异步地与服务器交换数据；2、HttpRequest：是指从客户端到服务器端的请求消息；3、JavaScript/DOM ：信息显示/交互；4、css：给数据定义样式；5、XML：作为转换数据的格式。

开启一个Ajax的请求的旅程

第一步：网页中用户通过JavaScript以及DOM操作，产生一个需要向服务器请求数据的交互；

第二步：创建对象XMLHttpRequest(支持所有现代浏览器)或者ActiveXObject（IE5或者IE6）。

XMLHttpRequest是Ajax的基础，它用于后台与服务器交换数据。
创建兼容性对象代码如下：

var xmlhttp；
if（window.XMLHttpRequest）{
     xmlhttp=window.XMLHttpRequest();
}else{
     xmlhttp=window.ActiveXObject("Microsoft.XMLHTTP");
}

第三步：调用对象的方法（open以及send方法），向服务器端发送请求。

open（请求的方式GET/POST，文件在服务器上的位置url，同步或者异步false/true）；
send：将请求发送到服务器。另外，string：仅用于 POST 请求；
调用方法代码如下：

open("GET/POST",url,false);
send();

对于POST以及GET的补充：
以下情况使用POST：
1、无法使用缓存文件（更新服务器上的文件或数据库）
2、向服务器发送大量数据（POST 没有数据量限制）
3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET中的服务器上文件位置url：

//在get中，可以为了避免缓存的结果？，请向 URL 添加一个唯一的 ID：
open("GET","xxxx.html?t="+Math.random(),true)
//如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
open("GET","xxxx.php?name=jianshu&age=18",true)

url中该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）

POST中：如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据，代码如下：

xmlhttp.open("POST","ajax_test.html",true);
//setRequestHeader(name:规定头的名称，value：规定头的值)
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

对于ture以及false：true是异步、false是同步。当是true的时候，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数；
代码如下：

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {    
     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
  } 
 }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

当是false的时候，如果服务器处于空闲状态下，是执行的，反之被挂起；不需要写onreadystatechange，直接将代码置于send后就行。

第四步：服务器响应

XMLHttpRequest中的：
responseText：以字符串响应的数据；
可以直接用

document.getElementById(xxx).innerHTML = xmlhttp.responseText;

responseXML：以xml响应的数据；

第五步：onreadystatechange事件。

onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status：200: "OK"
404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

后记

至此基本的数据请求，完毕了。至于对于Ajax的应用得拓展，还是用的，期待继续的学习，更多精彩的应用！