JS学习笔记Day22

一、Ajax的概念

　　（一）Ajax是一种在无需重新加载整个网页（刷新网页）的情况下能够更新部分网页的技术

　　（二）Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript+XML，它并不是新的编程语言，而是几种原有技术的结合体

二、Ajax的优势

　　（一）无刷新更新数据

　　（二）异步与服务器通信

　　（三）前端和后端负载平衡

　　（四）扩展：Ajax的工作原理

　　　　1、创建Ajax对象 var xhr = new XMLHttpRequest（）；（IE6写法【插件】：var xhr = new ActiveXObject（"Microsoft.XMLHTTP"）；）

　　　　兼容：var xhr = window.XMLHttpRequest ？ new XMLHttpRequest（）： new ActiveXObject（"Microsoft.XMLHTTP"）；

　　　　2、与服务器建立连接：xhr.open（'GET'，'获取文件的url'，'是否异步true默认'）；

　　　　3、发送请求：xhr.send（）；

　　　　4、利用监听事件，将请求的数据通过回调函数返回

　　　　　　给xhr对象添加一个监听事件，状态改变事件：

　　　　　　xhr.onreadystatechange = function（）{

　　　　　　　　if（xhr.readyState === 4）{

　　　　　　　　　　if（xhr.status === 200）{

　　　　　　　　　　　　ODiv.innerHTML = xhr.responseText；

　　　　　　　　　　}

　　　　　　　　}

　　　　　　}

　　　　扩展：

　　　　　　a、Onreadystatechange(状态改变事件)

　　　　　　　　1) readyState 属性：请求状态

　　　　　　　　　　a) 0：请求未初始化（还没有调用 open（））

　　　　　　　　　　b) 1：请求已经建立，但是还没有发送（还没有调用 send()）

　　　　　　　　　　c) 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）

　　　　　　　　　　d) 3：请求在处理中，通常响应中已有部分数据可用了，但是服务器还不有完成响应的生成。

　　　　　　　　　　e) 4：响应已完成，您可以获取并使用服务器的响应了。

　　　　　　　　2) Status 属性 ： 请求结果

　　　　　　　　　　扩展：

　　　　　　　　　　a) 201-206 都表示服务器成功处理了请求的状态代码，说明网页可以正常访问。

　　　　　　　　　　　　i. 200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

　　　　　　　　　　　　ii. 201(已创建)请求成功且服务器已创建了新的资源。

　　　　　　　　　　　　iii. 202（已接受）服务器已接受了请求，但尚未对其进行处理。

　　　　　　　　　　　　iv. 203（非授权信息）服务器已成功处理了请求，但返回了可能来自另一来源的信息。

　　　　　　　　　　　　v. 204（无内容）服务器成功处理了请求，但未返回任何内容。

　　　　　　　　　　　　vi. 205（重置内容）服务器成功处理了请求，但未返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。

　　　　　　　　　　　　vii. 206（部分内容）服务器成功处理了部分 GET 请求。

　　　　　　　　　　b) 300-307 表示的意思是：要完成请求，您需要进一步操作。通常，这些状态代码是永远重定向的。

　　　　　　　　　　　　i. 300（多种选择）服务器根据请求可执行多种操作。服务器可根据请求者来选择一项操作，或提供操作列表供其选择。

　　　　　　　　　　　　ii. 301（永久移动）请求的网页已被永久移动到新位置。服务器返回此响应时，会自动将请求者转到新位置。

　　　　　　　　　　　　iii. 302（临时移动）服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

　　　　　　　　　　　　iv. 303（查看其他位置）当请求者应对不同的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。

　　　　　　　　　　　　v. 304（未修改）自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。

　　　　　　　　　　　　vi. 305（使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。

　　　　　　　　　　　　vii. 307（临时重定向）服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

　　　　　　　　　　c) 4XX 表示请求可能出错，会妨碍服务器的处理。

　　　　　　　　　　　　i. 400（错误请求）服务器不理解请求的语法。

　　　　　　　　　　　　ii. 401（身份验证错误）此页要求授权。

　　　　　　　　　　　　iii. 403（禁止）服务器拒绝请求

　　　　　　　　　　　　iv. 404（未找到）服务器找不到请求的网页。

　　　　　　　　　　　　v. 405（方法禁用）禁用指定的方法。

　　　　　　　　　　　　vi. 406（不接受）无法使用请求的内容特性响应请求的网页。

　　　　　　　　　　　　vii. 407（需要代理授权）此状态码与 401类似，但指定请求者必须授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。

　　　　　　　　　　　　viii. 408（请求超时）服务器等候请求时发生超时。

　　　　　　　　　　　　ix. 409（冲突）服务器在完成请求时发生冲突。

　　　　　　　　　　　　x. 410（已删除）请求的资源永久删除后，服务器返回此响应。

　　　　　　　　　　　　xi. 411（需要有效长度）服务器不接受不含有有效内容长度标头字段的请求

　　　　　　　　　　　　xii. 412（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件

　　　　　　　　　　　　xiii. 413(请求实体过大)服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

　　　　　　　　　　　　xiv. 414（请求的 URL过长）请求的 URL（ 通常为网址）过长，服务器无法处理。

　　　　　　　　　　　　xv. 415（不支持的媒体类型）

　　　　　　　　　　　　xvi. 416（请求范围不符合要求）

　　　　　　　　　　　　xvii. 417（未满足期望值）

　　　　　　　　　　d) 500-505 表示服务器在尝试处理请求时发生内容错误。这些错误可能是服务器本身的错误，而不是请求出错。

　　　　　　　　　　　　i. 500（服务器内部错误）

　　　　　　　　　　　　ii. 501（尚未实施）服务器不具备完成请求的功能。

　　　　　　　　　　　　iii. 502（错误网关）服务器作为网关或代理，从上游服务器收到了无效的响应。

　　　　　　　　　　　　iv. 503（服务不可用）

　　　　　　　　　　　　v. 504（网关超时）服务器作为网关或代理，未及时从上游服务器接收请求。

　　　　　　　　　　　　vi. 505（HTTP 版本不受支持）

　　　　扩展：同步和异步

　　　　　　a、异步：同时执行，也叫作并发

　　　　　　b、同步：按步骤顺序执行，一条一条执行

　　　　扩展：程序、进程和线程

　　　　　　程序并不能单独执行，只有将程序加载到内存中，系统为他分配资源后才能够执行，这种执行的程序称之为进程，也就是说进程是系统进行资源分配和调度的一个独立单位，每个进程都有自己单独的地址空间。所以说程序与进程的区别在于，程序是指令的集合，是进程运行的静态描述文本，而进程则是程序在系统上顺序执行时的动态活动。

三、Ajax的封装

　　function Ajax(url,fnSuc,fnFail){
　　　　var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
　　　　xhr.open('GET',url,'true');
　　　　xhr.send();
　　　　xhr.onreadystatechange = function(){
　　　　　　if(xhr.readyState === 4 && xhr.status === 200){
　　　　　　　　if(typeof fnSuc === 'function'){
　　　　　　　　　　fnScu(xhr.responseText);
　　　　　　　　}else{
　　　　　　　　　　fnFail();
　　　　　　　　}
　　　　　　}
　　　　}
　　}

　　注：Ajax的缓存问题：当多次通过ajax方式请求服务器的数据时，如果请求的路径没有发生变化，后面的请求 会从浏览器的缓存上提数据  如果服务器的数据有更改    客户端不能及时获取浏览器的数据

　　　　解决方式 ：在请求路径上添加一个一个参数  值是一个随机值

　　　　"t"+(i+1)+".txt?id="+new Date().getTime()    或  Math.random()

四、回调函数

五、后台接口

　　接口 就是 后端程序为前端提供一个 路径

　　　　接口路径 ：  xxx.php    xxx.jsp    xxx.asp  含义 ： 验证用户名的唯一性

　　　　接口参数 :  用户名  username

http://127.0.0.1/ajax1806/checkNameDB.php?

　　　　接口参数 ： username  用户名

　　接口的返回值 :  

          　　 0   用户名不存在

           　　1   用户名存在

　　接口功能 

六、JS解析json

　　(一) Eval()方法：解析 JSON 数据的最常用方法是使用 javascript 的 eval()方法，代码如下 ：

　　　　function toJson(str){

　　　　　　var json = eval(‘(‘ + str + ‘)’);

　　　　　　return json;

　　　　}

　　该方法存在性能和安全方面的问题，不建议使用。

　　(二) JSON.parse()方法：这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本，这些浏览器都已经接近 W3C 标准，默认实现了 toJSON 方法。代码如下：

　　　　function toJson(str){

　　　　　　return JSON.parse(str);

　　　　}

　　扩展：将对象转成字符串  JSON.stringify()

　　(三) New Function 方法：代码如下

　　　　function toJson(str){

　　　　　　var json = (new Function(“return” + str))();

　　　　　　return json;

　　　　}

七、Ajax的运用

　　扩展：get   路径传值   传递的数据量小  速度快

　　　　　post  非路径传值  传递的数据量大