JavaScript基础知识总结——ajax基础

Ajax

• AJAX即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
• 通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的局部更新。
• 优点:
  1.使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地响应用户动作，并避免了在网络上发送那些没有改变的html代码信息。
  2.减轻服务器负担，按需要获得数据。
  3.无刷新更新页面，减少用户的实际和心理的等待时间。
  4.更好的用户体验。
  5.减轻宽带的负担。
  6.主流浏览器支持
• 缺点:
  1.AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。
  2.AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。
  3.对搜索引擎支持不好。

XMLHttpRequest 对象

Ajax主要通过使用XMLHttpRequest对象来实现异步数据交互和通信
1.非IE浏览器和高版本的IE浏览器

var xhr = new XMLHttpRequest();

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

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

3.兼容处理

//Ajax.js    
function createAjax() {
  var xhr ;
  if(window.XMLHttpRequest){
    //所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
    xhr = new XMLHttpRequest();
  }else {
    //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xhr;
}

• XHR的用法
  1.方法：

方法名	注释
abort	取消当前请求
getAllResponseHeaders	获取响应的所有http头
open(方式get/post，url地址，同步异步	创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send()	发送请求到http服务器并接收回应
setRequestHeader	单独指定请求的某个http头，header()设置http头协议信息

2.属性：

方法名	注释
onreadystatechange	指定当readyState属性改变时的事件处理句柄。
readyState	返回当前请求的状态，ajax行进过程中不同状态
responseBody	将回应信息正文以unsigned byte数组形式返回
responseStream	以Ado Stream对象的形式返回响应信息。
responseText	将响应信息作为字符串返回.只读
responseXML	将响应信息格式化为Xml Document对象并返回，只读
status	返回当前请求的http状态码. 200 ok 304 缓存 ； 404 not found; 403 没有权限 501 服务器级别错误
statusText	返回当前请求的响应行状态文本， ok not found forbidden

3.基本使用：

//>>1.创建Ajax引擎对象
var xmlHttpRequest= createAjax();
//>>2.设置发送请求时需要具备的数据
  //>>2.1.指定请求url地址(注意还没有发出请求仅仅是设置请求地址和请求方式)
  xmlHttpRequest.open('GET/POST','url地址',[ '是否异步']);
  //>>2.2.监听Ajax引擎对象的改变
  xmlHttpRequest.onreadystatechange=function(){
      //当请求和响应同时完成,从Ajax引擎中获取响应内容,然后通过javascript对网页进行操作
      if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
          //根据相应内容对网页进行操作的代码通常写在这里
          // xmlHttpRequest. responseText
//          //xmlHttpRequest. responseXML
      }
  }
//>>3.发送请求
xmlHttpRequest.send([post请求参数字符串])

• HTTP头部信息
  每个HTTP请求和响应都会带有相应的头部信息，XHR对象也提供了操作这两种头部信息的方法。
  默认情况下，在发送XHR请求的同时还会发送下列头部：
  1.Accept
  2.Accept-Charset
  3.Accept-Encoding
  4.Accept-Language
  5.Connection
  6.Cookie
  7.Host
  8.Referer
  9.User-Agent
  使用setRequestHeader()方法可以设置自定义的请求头部。参数为头部字段的名称和头部字段的值。这个要在open和send之间调用才有效。
  在使用这个方法时，建议使用自定义的头部名，以免与浏览器发生冲突，有的浏览器可能不允许开发人员重写默认头部。
  想要获得头部的值可以使用下面这两种方法。

xhr.setRequestHeader("MyHeader", "MyValue");

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

• GET请求
  用于向服务器查询某些信息，将参数放到后面。使用addURLParam就是保证URI被正确编码，格式良好。

var xhr = new XMLHttpRequest();
function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
var url = "example.php";
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");

xhr.open("get", url, true);
xhr.send(null);

• POST请求
  用于向服务器发送应该保存的数据，POST请求应该会发送很多的数据到服务器。这时send的参数就是发送的数据了。一般是数据序列化后的字符串。

var xhr = new XMLHttpRequest();
xhr.open("post", "postexample.php", true);
//模仿表单提交
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

<?php
  header("Content-type: text/plain");
  echo <<<EOF
Name:{$_POST['user-name'};
Emial:{$_POST('user-email')};
EOF;

GET请求消耗的资源少，同等数据量是POST的两倍。

XMLHttpRequest 二级

• FormData
  Web应用中频繁使用的一项功能就是表单数据的序列化。为此，2级定义了FormData对象。
  append方法可以向其添加数据，键值对形式
  也可以直接使用表单初始化FormData：

//键值对形式
var data = new FormData();
data.append("name", "Nicholas");
//使用表单初始化FormData
var data = new FormData(document.forms[0]);
xhr.send(data);

• 超时限定
  2级中又规定了一个timeout属性，表示请求在等待响应多少毫秒之后就终止。设置之后，如果超时没有接收到响应，就回触发timeout事件，调用事件处理程序，这时xhr.readyState可能已经为4了，但是此时请求已经中止了，不能再访问xhr.status，所以如果使用timeout，onreadystatechange事件处理也要小心。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        try {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        } catch (ex){

        }
    }
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //      IE8+
xhr.ontimeout = function(){
    alert("Request did not return in a second.");
};
xhr.send(null);

• overrideMimetype()
  重写XHR响应的MIME类型，因为响应的MIME类型决定了XHR对象如何处理它。如果服务器返回的是XML文件，MIME却是text/plain，那XHR对象就不能正确的设置responseXML。
  要在send之前调用这个方法。

var xhr = createXHR(); xhr.open("get", "text.php", true); xhr.overrideMimeType("text/xml"); xhr.send(null);