Ajax

AJAX介绍

传统的web交换缺点：

流量损失浪费时间和带宽

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。 特点： 局部刷新；

ajax的优点：

局部刷新；优化了浏览器与服务器之间的传输，减少了不必要的数据返回，减少了带宽占用；ajax引擎在客户端进行，承担部分服务器的工作，减少了服务器端的压力；

ajax的缺点 1.ajax不支持浏览器back按钮。 2.安全问题 AJAX暴露了与服务器交互的细节。 3.对搜索引擎的支持比较弱。 4.破坏了程序的异常机制。 5.不易调试。

ajax的使用方法

XMLHttpRequest 对象 XMLHttpRequest 是 AJAX 的基础。

1.创建XMLHttpRequest对象

var http=new XMLHttpRequest();

2.建立联系 open

open(method,url,async)

method：请求的类型；GET 或 POST get(获取数据) post（新建 、增加数据） put（更新、 修改数据 、 删除数据） url：文件在服务器上的位置（地址 ： 远程 地址和 本地地址） async：true（异步）或 false（同步） 默认为true ， 异步； false 为同步。

同步和异步的区别： 等待请求完成之后 在去执行 异步是：请求和后续代码同时执行

http.open("get","./list/data.txt");

3.向服务器发送请求 send(content )

这个方法里面的参数可写可不写 ，写了是服务器传输数据 ,不写是请求数据。

http.send();

send(string) 将请求发送到服务器。 string：仅用于 POST 请求

4.获取服务器响应的数据 （ 使用事件）

onreadystatechange responseText： 获得字符串形式的响应数据。 response和responseText 的用法一样。 readyState ：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪

http.onreadystatechange=function(){ /* console.log(http.response); //数据 console.log(http.readyState);*/ //读物的状态码 0 1 2 3 4 if(http.readyState==4){ var ajax1=JSON.parse (http.responseText); //json转化字符串 // var ajax1=JSON.parse (http.response); //json转化字符串 console.log(ajax1); } }

5.渲染界面

ajax同步:

意味着此时请求服务器后，JS代码不再继续执行，等待服务器返回后才继续往下执行。

ajax异步:

意味着此时请求服务器后，JS代码继续执行，不管服务器什么时候返回。

什么是回调函数？

回调函数是另外某件事结束时执行的一个函数。在Ajax中，回调函数就是服务器对一个请求对象作出响应时调用的函数。浏览器会在某个时刻”回调”这个函数。

HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，其中有的对开发人员有用，有的也没有什么用。 XHR对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。 默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept —— 浏览器能够处理的内容类型 Accept-Charset —— 浏览器能够显示的字符集 Accept-Encoding —— 浏览器能够处理的压缩编码 Accept-Language —— 浏览器当前设置的语言 Connection —— 浏览器与服务器之间连接的类型 Cookie —— 当前页面设置的任何 Cookie Host —— 发出请求的页面所在的域 Referer —— 发出请求的页面的URL。 User-Agent —— 浏览器的用户代理字符串

使用setRequestHeader()方法可以设置自定义的请求头部信息。 这个方法接收两个参数： 头部字段的名称 头部字段的值。 服务器在接收到这种自定义的头部信息之后，可以执行相应的后续操作。 要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。

示例：

//启动一个请求，以备发送 xhr.open("get", "example.txt", true); //异步请求 xhr.setRequestHeader("MyHeader", "MyValue"); //发送请求 xhr.send(null);

调用XHR对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。 调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。 示例：

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