Ajax(01)

[cy0707]

XMLHttpRequest()

在IE7及更高版本，Firefox，opera，Chrome和Safari浏览器中，都支持XHR对象，在这些浏览器中创建XHR对象直接像下面一样使用XMLHttpRequest()构造函数即可。

var xhr = new XMLHttpRequest()

HTTP

http是计算机通过网络进行通信的规则。浏览器即客户端通过协议向服务器请求信息和服务。HTTP是一种无状态的协议，是指不建立持久的连接。HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后Web服务器返回响应(response)，连接就被关闭了，在服务器端不保留连接的有关信息.HTTP遵循请求(Request)/应答(Response)模型。Web浏览器向Web服务器发送请求，Web服务器处理请求并返回适当的应答。所有HTTP连接都被构造成一套请求和应答。

http请求的过程：

1. 建立TCP连接。
   2.web浏览器向web服务器发送请求命令。
   3.web浏览器发送请求头信息。
   4.web服务器应答。
   5.web服务器应答头信息。
   6.web服务器向浏览器发送数据。
   7.web服务器关闭TCP连接。

http请求由几部分组成

1. http请求的方法或者动作。比如是GET还是POST。
2. 正在请求的url地址。
3. 请求头，包含客户端的环境信息，身份验证信息等。
4. 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等。

http响应由以下几部分组成

1. 一个数字和文字状态嘛，用于显示请求成功还是失败。
2. 响应头：响应头也和请求头一样包含许多有用的东西，例如服务器类型，日期时间，内容类型和长度等。
3. 响应体：响应正文。

XHR用法

在使用XHR对象时，要调用的第一个方法是open()方法，它接受3个参数，要发送的请求的类型（“get”,“post”）、要请求的URL、表示是否异步请求的布尔值。

xhr.open("get", "example.php",true)

运行这行代码，会启动一个针对example.php的GET请求。在这里，url相对于执行代码的当前页面（当然也可以使用绝对路径），调用open()方法并不会发送真正的请求。只是启动一个请求以备发送。

如果要发送特定的请求，必须像下面这样调用open()方法，
xhr.open("get", "example.php",false)
xhr.send(null)

这里send()方法接受一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。因为这个参数对有些浏览器来说是必需的，调用send()之后，请求就会被分派到服务器。

服务器收到响应后，响应的数据会自动填充到XHR对象的属性。相关属性如下：

1. responseText: 作为响应主体被返回的文本。
2. responseXML：如果响应的内容类型是text/xml或者application/xml,这个属性中将保存包含着响应数据的XML DOM文档。
   3.status: 响应HTTP状态
   4.statusText: HTTP状态的说明。

在收到响应时，要经历的过程。

1. 第一步检查status属性，以确定响应已经成功返回。（200表示成功的标志）。
2. 此时responseText属性的内容已经就绪，而且内容类型正确的情况下，responseXML也应该能访问。
   3.对于状态码304表示请求资源并没有修改，可以直接使用浏览器中的缓存版本，当然也意味着，响应时有效的。

下面是一个例子：

xhr.open("get", "example.php",fasle);
xhr.send(null);
if(xhr.status>=200 && xhr.status<300 || xhr.status == 304) {
   console.log(xhr.responseText);
}else {
   console.log("request was unsuccessful: " + xhr.status);
}

通过检测status来决定下一步操作，无论内容类型是什么，响应主体的内容都会保存在responseText属性中，而对于非XML数据而言，responseXML属性为null。

前面都是同步的请求，但大多数我们发送的是异步的请求。使JavaScript继续执行而不必等待响应。
此时我们可以检测XHR对象的readyState的属性。该属性表示请求/响应过程的当前活动阶段。这个属性可取以下值。
0：未初始化，尚未调用open()方法。
1：启动，已经调用open()方法，但尚未调用send()方法，
2：发送，已经调用send()方法，但尚未收到响应。
3：接收，已经接收到部分响应数据。
4：完成，已经接收到全部响应数据，而且可以在客户端使用了。

只要readyState属性改变，就会触发readystatechange事件。可以利用这个事件来检测每次状态变化后的readyState的值。（注意必须在调用open()之前，指定onreadystatechange事件处理程序才能保证跨浏览器兼容性）。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4) {
        if(xhr.status>=200 && xhr.status<300 || xhr.status == 304) {
              console.log(xhr.responseText);
        }else{
            console.log("request was unsuccessful: " + xhr.status);
         }
     }
};
xhr.open("get", "example",true);
xhr.send(null);

注意在这个例子中，利用的dom0级的事件处理程序，没有使用dom2级是因为并非所有浏览器都支持dom2级，与其他事件处理程序不同。这里并没有传递event对象。而是通过XHR对象本身来确定下一步该怎么做。

HTTP头部信息

在默认情况下，在发送XHR请求同时，还会发送以下头部信息
1.Accept: 浏览器能够处理的内容类型。
2.Accept-Charset: 浏览器能显示的字符集
3.Accept-Encoding:浏览器能够处理的压缩字编码
4.Accept-Language:浏览器当前设置的语言。
5.Connection: 浏览器与服务器建立的连接。
6.Cookie:当前页面设置的任何cookie。
7.Host:发出请求的页面所在域。
8.Referer:发出请求的页面的URL。

可以使用setRequestHeader()方法，设置自定义的请求头部。该方法接受两个参数，一个是头部字段的名称，一个数头部字段的值。要成功发送请求头部信息，必须在调用open()方法之后，且调用send()方法之前调用。

//还是上面的那个例子
xhr.open("get", "example",true);
xhr.setRequestHeader("myheader","myvalue");
xhr.send(null);

getRequestHeader()方法可以取得一个包含所有头部信息的长字符串。
var myheader = xhr.getRequestHeader("myheader");
var allheader = xhr.getRequestHeader();

GET请求

GET请求时最常见的请求，最常用于向服务器查询某些信息，必要时，可以将查询的字符串参数追加到URL的末尾，以便将信息发送给服务器，对于XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。

在使用GET请求经常发生的错误在于，就是查询字符串的格式有问题，查询字符串中的每一个参数名称和值都必须使用encodeURLComponent()进行编码，然后才能放到URL的末尾，而且所有名-值对必须由&分隔，例如：
xhr.open("get", "example.php?name1=value1&name2=value2",value);

可以用以下函数。

function addURLparam(url, name, value){
//查询当前url，如果不存在？那么就加上?,不然加上&
    url += (url.indexof("?") == -1) ? "?" : "&";
    url += encodeURLComponent(name) + "=" + encodeURLComponent(value);
    return url; 
}
//利用上面的这个函数
var url = "example.php";
//添加参数
var url = addURLparam(url, "name", "jerry");
url = addURLparam(url, "book", "ps");
//初始化请求
xhr.open("get",url,false);

POST请求

post请求用于向服务器发送应该被保存的数据，POST请求应该把数据作为请求主体提交。
看一个例子

//前面的例子
xhr.open("post", "example.php", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencode");
xhr.send("name=xiaoxiao");

服务端（例如php）返回json数据格式。客户端的处理。

例如在后台php语言中，对前端请求作出的响应。返回的是一个json对象。

echo '{"success":false,"msg":"参数错误"}';
//或者
$result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . '，员工姓名：' . $value["name"] . '，员工性别：' . $value["sex"] . '，员工职位：' . $value["job"] . '"}';

我们在前端一般这样处理（对于json我们有节总结）

var request = new XMLHttpRequest();
    request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
//这里我们把后台传过来的json数据，解析为JavaScript对象
                var data = JSON.parse(request.responseText);
                if (data.success) { 
                    document.getElementById("searchResult").innerHTML = data.msg;
                } else {
                    document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;
                }
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }

jQuery中的ajax使用

.load( url ,[ data ] ,[ complete ] )方法

参数分别代表的是：要请求的地址，发送到服务器的一个简单对象（含有零个或多个的key/value对）或者字符串，请求完成的回调函数。

//例1，类似以GET提交
$( "#result" ).load( "ajax/test.html" );
//在这里需要注意，如果文档中没有#result的元素，那么这个请求并不会发送

//例2，回调函数
$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

//例3.POST提交
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "The last 25 entries in the feed have been loaded" );
});

jQuery.get( url ,[ data ] ,[success ] ,[ dataType ] )

//data参数是从服务器传过来的数据。
$.get( "test.php", function( data ) {
  $( "body" )
    .append( "Name: " + data.name ) // John
    .append( "Time: " + data.time ); //  2pm
}, "json" );

jQuery.post( url ,[ data ] ,[ success ], [ dataType ] )

$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
  console.log( data.name ); // John
  console.log( data.time ); // 2pm
}, "json");

jQuery.ajax( url ,[settings ] )

这两个参数，一个是请求地址，第二个是选择的参数列表（下面）。

参数名	类型	描述
url	String	(默认: 当前页地址) 发送请求的地址。
type	String	(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout	Number	设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async	Boolean	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend	Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。function (XMLHttpRequest) { this; // the options for this ajax request }
cache	Boolean (默认: true)	jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。告诉服务器从浏览器提交过来的数据格式。例如：我们提交数据时假如使用了 JSON2.js 中方法 JSON.stringify(obj) 格式化为json字符串后，再默认提交就会报错。这个时候就需要指定提交的内容格式为："application/json"。data Object,String 发送到服务器的数据。若data数据类型为JavaScript对象或数 组，Jquery在提交之前自动调用JQuery.param()方法把要发送的数据编码成为"application/x-www-form- urlencoded"格式的数据（即 name=value&name1=value1）；JavaScript对象必须为 Key/Value 格式；如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'；若data数据类型为String类型，则直接默认该数据已经按照"application/x-www-form-urlencoded"格式编码完成，不再转换。processData选项可以控制是否进行转换。该选项默认为true。
dataType	String	预期服务器返回的数据类型。设定HttpHeader中“Accept”域的内容，告诉服务器浏览器可以想要返回的数据格式类型，同时JQuery也会根据该类型对返回的数据进行处理。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:"xml": 返回 XML 文档，可用 jQuery 处理。"html": 返回纯文本 HTML 信息；包含 script 元素。"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。"json": 返回 JSON 数据 。JQuery将返回的字符串格式数据自动转化为Javascript对象，便于直接使用obj.property格式访问。若没有指定该选项，即使返回的是JSON格式的字符串，JQuery也不会自动转换。"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。function (XMLHttpRequest, textStatus, errorThrown) {// 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态function (data, textStatus) {// data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

一个例子。

var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});

request.done(function( msg ) {
  $( "#log" ).html( msg );
});

request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

注意：The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.官方文档说明了在jquery3.0版本中，用了done.fail和always方法代替了原来的success，error,complete方法。

一个例子

$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",    
            url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
            dataType: "json",
            success: function(data) {
                if (data.success) { 
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });

    $("#save").click(function(){ 
        $.ajax({ 
            type: "POST",   
            url: "serverjson.php",
            data: {
                name: $("#staffName").val(), 
                number: $("#staffNumber").val(), 
                sex: $("#staffSex").val(), 
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) { 
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });
});

对于ajax的jquery的学习，需要多加练习，遇到问题查看官网的解释以及网上博客。

对于表单序列化的方法serialize()

serialize()方法接受不接受参数。
看一个官网的例子。

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>

  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>

  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

<p><tt id="results"></tt></p>

  function showValues() {
//先把表单序列化，是一个字符串
    var str = $( "form" ).serialize();
//在这个元素里面显示序列化的结果。
    $( "#results" ).text( str );
  }
//绑定事件，对于单选框和复选框
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );
  showValues();

跨域

JavaScript处于安全方面的考虑，不允许跨域调用其他页面的对象。
跨域简单的理解：由于JavaScript的同源策略，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。

默认端口为80，一般省略掉。