思考 Ajax请求

1. 什么是ajax 

ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。虽然名字中包含XML，但ajax通信与数据格式无关。

ajax技术的核心是XMLHttpRequest 对象（简称xhr)

IE7+,Firfox,Opera,Chrome,safari都支持原生的xhr对象，在这些浏览器中创建xhr对象要像下面这样使用XMLHttpRequest构造函数。

var  xhr=new XMLHttpRequest();

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

注：调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。

xhr.open("get","example.php",false); 

要发送特定请求，必须像下面这样，调用send()方法，参数null 表示作为请求主体发送的数据。调用send()方法后，请求就会被分派到服务器。

xhr.send(null)；

xhr对象的属性

（1）responseText:作为响应主体被返回的文本。

（2）responseXML：若响应内容的类型：text/xml 或application/xml ,这个属性中将保存包含着响应数据的xml dom文档

（3）status：响应的http状态

（4）statusText：http状态的说明

  (5) readyState:该属性表示请求／响应过程的当前活动阶段，这个属性可取的值如下

      0: 未初始化，尚未调用open（）方法

      1: 启动，已经调用open（）方法，但尚未调用send ()方法

      2: 发送，已经调用send()方法，但尚未收到响应

      3: 接收，已经接收到部分响应数据

      4: 完成，已经接收到全部响应数据，而且已经可以中客户端使用了。

      只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件，可以利用这个事件来检测每次状态变化后readystate的值。

      xhr.onreadystatechange=function(){

              if(xhr.readyState==4){

                    if((xhr.status>=200 && xhr.status<300) || xhr.status==304}{

                              console.log(xhr.responseText);

                    } else{

                             console.log("requst was un successful:"+xhr.status);

                     }

                }

        }

在接收到响应之前，还可以调用abort（）方法来取消异步请求，如下所示：

xhr.abort();

调用这个方法后，xhr对象会停止触发事件。而且也不允许访问任何与响应有关的对象属性。

／*********************************************************************************************************************／

AngularJS 提供了一个类似jQuery的$.ajax的对象，用于异步请求。
在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。

对于官网的$http对象的总结和使用。

用法：

$http(config);

参数：

config （常用的参数标红，翻译了一下）

config

object

Object describing the request to be made and how it should be processed. The object has following properties: method – {string} – HTTP method (e.g. 'GET', 'POST', etc)  ------------------  http交互方法：GET/POST 两种 url – {string} – Absolute or relative URL of the resource that is being requested. ------------------  URL传输地址 params – {Object.<string|Object>} – Map of strings or objects which will be serialized with theparamSerializer and appended as GET parameters.    ------------------  Map 类型的参数，传输给后台 data – {string|Object} – Data to be sent as the request message data. ------------------  要求传入的参数  headers – {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent. Functions accept a config object as an argument. xsrfHeaderName – {string} – Name of HTTP header to populate with the XSRF token. xsrfCookieName – {string} – Name of cookie containing the XSRF token. transformRequest – {function(data, headersGetter)|Array.<function(data, headersGetter)>} – transform function or an array of such functions. The transform function takes the http request body and headers and returns its transformed (typically serialized) version. See Overriding the Default Transformations transformResponse –{function(data, headersGetter, status)|Array.<function(data, headersGetter, status)>} – transform function or an array of such functions. The transform function takes the http response body, headers and status and returns its transformed (typically deserialized) version. See Overriding the Default TransformationjqLiks paramSerializer - {string|function(Object<string,string>):string} - A function used to prepare the string representation of request parameters (specified as an object). If specified as string, it is interpreted as function registered with the $injector, which means you can create your own serializer by registering it as a service. The default serializer is the $httpParamSerializer; alternatively, you can use the$httpParamSerializerJQLike cache – {boolean|Cache} – If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with $cacheFactory, this cache will be used for caching. ------------------  缓存，设为true的时候,默认的$ HTTP缓存将用于缓存GET请求，否则，创建Factory缓存实例. timeout – {number|Promise} – timeout in milliseconds, or promise that should abort the request when resolved. withCredentials - {boolean} - whether to set the withCredentials flag on the XHR object. See requests with credentials for more information. responseType - {string} - see XMLHttpRequest.responseType.

返回： 一个httpPromise对象(一般只用data和status)

HttpPromise

Returns a promise object with the standard then method and two http specific methods: success and error. Thethen method takes two arguments a success and an error callback which will be called with a response object. Thesuccess and error methods take a single argument - a function that will be called when the request succeeds or fails respectively. The arguments passed into these functions are destructured representation of the response object passed into the then method. The response object has these properties: data – {string|Object} – The response body transformed with the transform functions.  ------------------  返回数据 status – {number} – HTTP status code of the response. ------------------  返回状态。等于200时为成功，否则失败。 headers – {function([headerName])} – Header getter function. config – {Object} – The configuration object that was used to generate the request.  ------------------  用于生成请求的配置对象，原来传入的参数等。 statusText – {string} – HTTP status text of the response. ------------------  返回的状态文本

方法：

get(url, [config]);         快捷的方法来执行GET请求。

post(url, data, [config]);  快捷的方法来执行POST请求。

put(url, data, [config]);

patch(url, data, [config]);

jsonp(url, [config]);

head(url, [config]);

delete(url, [config]);