JavaScript中级 （三） ----AJAX

1. 什么是AJAX

async javascript and xml 异步的JS和XML

AJAX只不仅可以异步,它也有同步处理

2. AJAX可以处理什么问题

AJAX是用来实现客户端和服务器数据请求交互的

在客户端的JS中,我们可以使用AJAX技术向服务器端发送一个请求,服务器端接收到请求后会把客户端想要的“数据”返回

GMAIL是全世界第一个使用AJAX技术处理的项目

3. HTML , XHTML, DHTML, XML 的区别

HTML: 超文本标记语言 使用W3C规范的标记标签搭建一个WEB页面,页面中除了文字以外还可以包含图片以及音视频等富媒体资源

XHTML: 语法更加严谨的HTML

DHTML: 页面中的数据内容是动态绑定的

XML: 可扩展的标记语言,它里面所使用的标签都是自己写的，我们使用一些具有特殊意义的自定义的标记标签来存储我们的数据结构

4. AJAX四部曲

    var xhr = new XMLHttpRequest;     // 1. 创建一个AJAX对象    console.log(xhr.readyState); //->0    xhr.open('GET', 'note.txt?_=' + Math.random());   // 2. 设置AJAX请求的配置参数,以及请求的URL地址    console.log(xhr.readyState);  //->1    xhr.onreadystatechange = function () {    // 4. 检测状态改变是执行操作        if (xhr.readyState === 2) {            console.log(new Date(xhr.getResponseHeader('Date')));  //->在状态为2的时候获取服务器的时间,并且把获取的结果转换成北京时间；在2的时候获取可以减少时间差。        }        if (xhr.readyState === 4) {            console.log(xhr.responseText);         }        console.log(xhr.readyState);//->2 3 4    };    xhr.send(null);  // 3. 设置请求体

5. http请求的方式

GET: 主要是从服务器端获取内容,可以说是给服务器的少,从服务器端获取的多

POST: 推送, 给服务器端的多,从服务器端获取的少

PUT: 放, 客户端想在服务器上放一些文件

DELETE: 删除, 客户端想把服务器上的某些文件删除掉

HEAD:头部, 客户端只想获取服务器端的响应头信息,例如:我们只想获取服务器端的时间,就可以只获取响应头信息了

6. GET 与 POST 的区别

使用GET请求传递给服务器端内容,我们一般都把需要传递的内容放在请求URL的末尾,通过问号传递参数的方式传递给服务器
xhr.open(‘GET’,’/getAllList?lx=1&name=aa&age=7’);
xhr.send(null);

使用POST请求传递给服务器端内容,我们一般都把需要传递的内容放在请求的主体中传递给服务器
xhr.open(‘POST’,’/addInfo’);
xhr.send(‘{“name”:”aa”,”age”:7,”lx”:2….}’);//->在SEND中书写的内容就是请求主体中传递给服务器的内容,一般都是JSON格式的字符串

1. 大小上的区别:      每一个浏览器对于URL的长度都是有限制的(谷歌8KB、火狐7KB、IE2KB),GET请求传递给服务器的内容都是放在URL的末尾,如果传递的内容过多,URL就会超过限制的长度,超过的部分会被浏览器截取掉,这样传递给服务器的内容就不完整了,所以使用GET请求,我们需要限制传递内容的大小；而POST是都放在请求主体中传递过去的，理论上不存在大小的限制； 2. 缓存问题:      GET请求经常容易出现缓存(浏览器的默认缓存)，例如第一次请求的地址是'/getList?n=12' 第二次我想重新通过这个地址获取最新的数据,请求的地址依然是'/getList?n=12'；而POST请求不存在这个问题；      那么使用GET请求如何避免浏览器的缓存呢?        在每一次请求的URL地址后面都加上随机数即可        xhr.open('GET','/getList?n=12&_='+Math.random());        xhr.send(null); 3. 安全问题      GET请求传递给服务端的内容都在URL上,在互联网圈子中有一种技术叫做URL劫持,这样的话传递给服务端的内容暴露了,不安全；POST传递的内容在请求主体中，不会受到URL劫持的影响，所以相对来说安全一些；

7. AJAX的状态 —- readyState

   0      UNSEND 未发送,开始创建一个AJAX对象状态就是0   1      OPEND 已经执行了xhr.open,请求的URL地址被打开,相关参数已经被配置   2      HEADER_RECEIVE 响应头信息已经被客户端接收   3      LOADING 响应主体的内容正在准备和返回中   4      DONE 响应主体的内容也已经被客户端接收了

8. 监听状态改变时的常用操作

xhr.onreadystatechange=function(){}

  xhr.getResponseHeader([key])           //   获取响应头信息:     xhr.setRequestHeader([key],[value])    //     设置请求头信息:    xhr.responseText/xhr.responseXML...    //     获取响应主体信息: 

9. HTTP状态码:xhr.status

200 或者 2开头 都代表成功

301 Moved Permanently 永久移动(永久重定向) 在最新的HTTP规范中,307才是永久重定向

302 Move temporarily 临时移动(临时重定向) 服务器的负载均衡

304 Not Modified 读取的是缓存中的内容

400 Bad Request 传递给服务器的参数出现错误

401 Unauthorized 权限不够,不能通过服务器的验证

404 Not Found 请求的地址不存在

500 Internal Server Error 服务器出现未知的错误

503 Service Unavailable 服务器超过负载