AJAX 简单概括 -- 前端知识

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于建立快速动态网页的技术。

经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）若是须要更新内容，必需重载整个网页面。

有不少使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX优缺点

使用Ajax的最大优势，就是能在不更新整个页面的前提下维护数据。这使得wed应用程序更为迅捷地回应用户动做，并避免了网络上发送那些没有改变的信息。

Ajax不须要任何浏览器插件，但须要用户容许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不一样的浏览器和平台上通过严格的测试。随着AJAX的成熟，一些简化AJAX使用方法的程序也相继问世。一样，也出现看另外一种辅助程序设计的技术，为那些不仅是JavaScript的用户提供替代功能。

对应用AJAX最重要的批评就是，他可能破坏浏览器的后退与加入收藏书签功能，在动态更新页面的状况下，用户没法回到前一个页面状态，这是由于浏览器仅能记下历史记录中静态页面。一个被完整读入的页面与与一个被动态修改过的页面之间 的可能差异很是微妙；用户一般都但愿单击后退按钮，就可以取消他们的前一次操做，可是在AJAX应用程序中，。却没法这样作。不过开发者以想出了种种方法来解决这个问题，HTML5以前的方法大可能是在用户单击后退按钮访问历史记录时，经过建立或使用一个隐藏的IFRAME来实现重现页面上的变动。

进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——须要慎重考虑。若是不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。一般的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操做而且正在读取数据和内容。

原生JavaScript编写AJAX

1.AJAX - 建立 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

全部现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

建立 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

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

2.AJAX - 向服务器发送请求请求

 如需将请求发送到服务器，咱们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法 描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

GET 仍是 POST？

与 POST 相比，GET 更简单也更快，而且在大部分状况下都能用。

然而，在如下状况中，请使用 POST 请求：

没法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制   只要网速快，理论上无限大！）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求：

实例
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

在上面的例子中，您可能获得的是缓存的结果。

为了不这种状况，请向 URL 添加一个惟一的 ID：

实例
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

若是您但愿经过 GET 方法发送信息，请向 URL 添加信息：

实例
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST 请求

一个简单 POST 请求：

实例
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

若是须要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。而后在 send() 方法中规定您但愿发送的数据：

实例
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford"); 

方法 描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称

value: 规定头的值

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

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

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象若是要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来讲，发送异步请求是一个巨大的进步。不少在服务器执行的任务都至关费时。AJAX 出现以前，这可能会引发应用程序挂起或中止。

经过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其余脚本

当响应就绪后对响应进行处理

Async=true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

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

您将在稍后的章节学习更多有关 onreadystatechange 的内容。

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改成 false：

xmlhttp.open("GET","test1.txt",false);

咱们不推荐使用 async=false，可是对于一些小型的请求，也是能够的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。若是服务器繁忙或缓慢，应用程序会挂起或中止。

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面便可：

实例
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

 3.AJAX - 服务器 响应

服务器响应

如需得到来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	得到字符串形式的响应数据。
responseXML	得到 XML 形式的响应数据。

 

responseText 属性

若是来自服务器的响应并不是 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，所以您能够这样使用：

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

 

responseXML 属性

若是来自服务器的响应是 XML，并且须要做为 XML 对象进行解析，请使用 responseXML 属性：

实例
请求 cd_catalog.xml 文件，并解析响应：

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;
 

 

 4.AJAX - onreadystatechange 事件

当请求被发送到服务器时，咱们须要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器链接已创建 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，咱们规定当服务器响应已作好被处理的准备时所执行的任务。

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

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

使用回调函数

回调函数是一种以参数形式传递给另外一个函数的函数。

若是您的网站上存在多个 AJAX 任务，那么您应该为建立 XMLHttpRequest 对象编写一个标准的函数，并为每一个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

实例
function myFunction() { 
　　loadXMLDoc("/try/ajax/ajax_info.txt",function() { 
　　　　if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
　　　　　　document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
　　　　　} 
　　}); 
}

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

经过 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您可以把这些外部数据直接载入网页的被选元素中。

若是没有 jQuery，AJAX 编程仍是有些难度的。

编写常规的 AJAX 代码并不容易，由于不一样的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为咱们解决了这个难题，咱们只须要一行简单的代码，就能够实现 AJAX 功能

success(data, textStatus, jqXHR)         （Function,Array）

请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置能够接受一个函数数组。每一个函数将被依次调用。 Ajax 事件。

function (data, textStatus) {
    // data 多是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

type     

(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可使用，但仅部分浏览器支持。

url   

(默认: 当前页地址) 发送请求的地址。

 

例如：

$.ajax({
    type : "POST",
    url : "http://192.168.9.174:3000/login",
    data : {
        uname : $("#uname").val(),
        upassword : $("#upassword").val()
    },
    success : function(data){
        console.log(data);
        if(data == 1){
            $("#ts").html("成功").css("color","green");
            window.location.href="shouye.html?uname=" + $("#uname").val(); 
        }
        if(data == 2){
            $("#ts").html("用户名或者密码错误").css("color","red");
        }
        else if(data == 0){
            $("#ts").html("提交参数错误").css("color","red");
        }
     },
     error : function(err){    
           console.log(err)
     }
})

 

$.ajax({
　　type:"GET",
　　url:"http://192.168.9.174:3000/index_getdata?uname="+myname,
　　success:function(el){
　　　　console.log（el）；
　　}，
　　error : function(err){    
       console.log(err)}