js- data exchange --AJAX

One: Introduction

　　Today, with everyone a brief look at the front-end development, front and rear end a means of data exchange, we all know that transfer data at the front end of the next word, use get, post method to send data to the back end, after the data receiving end, linked to a database, database operations, and then return the data to the database front-end, so this time the tip of how to accept the back-end data transmission over it? This is the focus of today to share with you, -ajax way to the front to accept the data.

　　So what ajax in the end is it? Is a programming language? No, in fact it is a collection of ajax of a technique, a means summed up by a wide range of technology, as an important means of front and back end data exchange.

　　ajax full name: "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), it is not a single technology JavaScript, but use a combination of a series of interactive web application-related technology being formed. With Ajax, we can not refresh the status update page, and asynchronous submit to enhance the user experience.

Two: technologies　　

　　ajax This concept is JesseJamesGarrett invention in 2005. Which itself is not a single technology, is a collection of a bunch of technology, we are:

　　1.JavaScript, by the user or other related events to capture interactions with the browser

　　It sends a request to the server without 2.XMLHttpRequest object, without interrupting other browser tasks through the object;

　　3. The files on the server, save the text data to XML, HTML or JSON format;

　　4. Other JavaScript, to interpret the data (such as PHP MySQL data obtained from) from the server and renders it onto the page.

Three: Workflow　　

　　As already mentioned a series of ajax technology used, then the following step by step to talk about, the meaning and usage of these technologies (ajax workflow)

　　1: create media (objects)

var x = new XMLHttpRequest();

　　2: a method of transmitting

x.open ( " GET " , " URL " , to true ); 
three parameters: transmission method, address, boolean value (default is true, asynchronous) 
   the first parameter: POST || GET 
    difference between a GET and POST: 
    1 . POST is mainly used to transmit data, receive data mainly used GET;
     2 security .PSOT better transmission data, and GET is poor;
     . 3 .POST transmission data size is not limited, and the size is limited GET ~ 2 100K. 
    When using GET and POST: using GET method, using the POST method should be operational data in the data acquisition. 

    The second argument: url To request a 

    third argument: accept a Boolean value that determines the way the request 
    is true, the server request is asynchronous, that is, without waiting for the results of the script execution server send () method, continues executing script code; 
    false, the server requests are synchronous, that is, wait for the server to return an execution result of the execution of the script after send () method, if the waiting time of timeout, then no wait, proceed back the script code!

　　3: ajax and monitor the status of http

= x.onreadystatechange function () { 
    IF (4 && x.status x.readyState == == 200) { 
　　　　// Ajax is a state and state 4 is http i.e., data representing the normal 200 
　　} 
}

　　4: Send message

x.send();

Four: ajax http status codes and status codes table

　　　1:ajax.readyState:

    0 - (uninitialized) yet call send () method
     . 1 - (loading) has been called send () method, a transmission request is
     2 - (finished loading) send () method execution is completed, the entire response has been received
     3 - (interactive) response is being parsed
     4 - (complete) response content analysis is complete, you can call the client

　　2: HTTP status code ajax.status: monitor server status

1**：请求收到，继续处理
    2**：操作成功收到，分析、接受
    3**：完成此请求必须进一步处理
    4**：请求包含一个错误语法或不能完成
    5**：服务器执行一个完全有效请求失败
    
    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTP协议版本

    200——交易成功
    201——提示知道新文件的URL     
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到，但返回信息为空
    205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成了部分用户的GET请求

    300——请求的资源可在多处得到
    301——删除请求数据
    302——在其他地址发现了请求数据
    303——建议客户访问其他URL或访问方式
    304——客户端已经执行了GET，但文件未变化
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码，现行版本中不再使用
    307——申明请求的资源临时性删除

    400——错误请求，如语法错误
    401——请求授权失败
    402——保留有效ChargeTo头响应
    403——请求不允许
    404——没有发现文件、查询或URl
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖，请求资源不可访问
    407——类似401，用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态，请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

    500——服务器产生内部错误
    501——服务器不支持请求的函数
    502——服务器暂时不可用，有时是为了防止发生系统过载
    503——服务器过载或暂停维修
    504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
    505——服务器不支持或拒绝支请求头中指定的HTTP版本

五：解决get方法一个bug

　　我们都知道，每次浏览器请求相同地址,会优先查找缓存,通过缓存打开的页面速度也快,但是如果当服务器种的数据进行更新了,页面请求任然走的是缓存的话，就会导致页面获取不到最新的数据，这个是很严重的问题，那么如何解决这个bug呢？如果说每次访问的都是都不一样,但是拿到的数据都是一样的，那么这个问题也就迎刃而解了，一个随时都在变化的且不需要去操控的东西,相信大家都能想到一个东西叫做时间戳,没错,我们可以将时间戳拼接在url的后面,这样就能保证我们每次拿到的都是不同的地址,以此来欺骗浏览器。

六：ajax的优缺点：

1：优点

　　无刷新加载技术,不需要刷新页面就能拿到最新的数据

　　初始加载页面，提升速度
　　节省性能，提高用户体验

2：缺点：

　　ajax破坏了浏览器的前进后退功能
　　破坏了SEO
　　ajax的兼容：IE5之前不兼容