ajax入门级

AJAX

AJAX：即异步的JavaScript 和 XML，是一种用于创建快速动态网页的技术；

　　　　传统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面；

　　　　使用AJAX则不与要加载更新整个网页，实现部分内容更新；

AJAX = Asynchronous JavaScript and XML (异步的JavaScript 和 XML)

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

为什么要使用AJAX：

　　　　AJAX主要是实现页面和web服务器之间数据的异步传输；

　　　　简单来说，不采用ajax的页面，当用户在页面发送请求是，就要进行整个页面的刷新，刷新块面取决于服务器的处理快慢。在这个过程中用户必须得等待，不能济宁其他操作，也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。

　　　　采用ajax的页面，可以实现页面的局部更新，而不是整个页面的更新；并且发送请求后，用户还可以惊醒页面上的其他操作，这就是异步的方式；客户端和服务端间值传递需要的数据，效率高，用户体验性好；并且AJAX引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载；

AJAX的工作原理：

　　　　XHR（浏览器内置对象：XMLHttpRequest）也就是AJAX功能实现所依赖的对象，AJAX就是通过浏览器的内置对象XMLHttpRequset来发送异步请求的，异步请求不会妨碍客户端的任何操作；

这里简单说下什么是异步：

　　　　XHR就相当于一个通信兵，来负责客户端与服务器之间的通信传输；

要打仗了，前方阵地（客服端）不可能只等着通信兵（XHR）传递消息其他什么也不干吧，所以前方阵地还在干着自己的事情然后派通信兵去请求后方指挥部（服务器）的命令，指挥部下达命令指挥，通信兵再把命令传到前方阵地，然后前方阵地再执行命令相关的操作（客户端把数据渲染到页面），这也就是Ajax的异步原理。

同步：所谓的同步就是前方阵地和通信兵一起去向服务器请求数据，直到通信兵请求到数据，我才开始渲染页面，在请求的过程中页面一直是白屏等待的。

var xml = new XMLHttpRequest()   　　　　　　// 这是生成一个ajax对象

xml.open(method,url,boolean)

//  open(): XMLHtttpRequset.open()方法用于指定HTTP请求的参数，或者说初始化XMLHttpRequest实例对象，

参数1：有get和post两个取值

参数2：是你获取的路径

参数3：当是“true”的时候，服务器的请求是异步进行的，也就是脚本执行send（）方法后不等待，服务器的执行结果，而是继续执行脚本代码；

　　　　当时false是，服务器请示是同步及逆行的，也就是脚本执行send（）方法后等待服务器的执行截锅的返回，若在过程中超时，则不再等待，继续执行后面的脚本代码；

xml.send()

　　　　**这里我不是太清楚***   当open中使用GET方法提交这里的send（）参数使用null；

　　　　　　也可以使用send（）方法传递参数，shyongsend方法传递参数使用的是POST方法，需要谁的那个Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容；参数的提交格式和GET方法中url的写法一样。设置头信息前必须调用open方法；xmlHttpRequest.open("POST","login.jsp",true); xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

　　　　需要主要的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost（）方法

xmlHttpRequest常用属性

　　　　redayState: 返回的是一个整数，表示实例对象的当前状态，该属性为只读。它返回以下值；

0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。

1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。

2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。

3，表示正在接收服务器传来的数据体（body 部分）。

4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

　　　　onredaystatachange 这个属性属于一个监听函数：通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

这里写一个简单的写法：

xmlhttp.onreadystatechange = function () {

　　if (xmlhttp.readyState == 4) {

　　　　if (xmlhttp.status == 200) {

　　　　　　fn(xmlhttp.responseText)

　　　　}

　　}

}

 

　　　　　responseText属性：属性返回从服务器接受到的字符串，该属性为只读；只有HTTP请求完成后接受以后，该属性才会包含完整的数据；

 

　　　　　status属性：

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP

状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。该属性只读。

200, OK，访问正常

404, Not Found，未发现指定网址

500, Internal Server Error，服务器发生错误

　　　　jQuery中的AJAX;

　　$.ajax({

　　　　　　type:"post",

　　　　　　url:"",

　　　　　　async:true,

　　　　　　data:{},

　　　　　　success:function(data){

　　　　　　　　console.log(data)

　　　　}

　　})

　　这是jQuery中提供的ajax方法