Ajax基础知识

比眉伴天荒 2022-06-05 03:58 227阅读 0赞

1.Ajax基础知识  
2.Ajax兼容处理及惰性思想  
3.Ajax中的http请求方式  
4.Ajax中的同步编程和异步编程  
5.编写简易的Ajax方法库

<table> 
 <tbody> 
  <tr> 
   <td><b>1.Ajax基础知识</b></td> 
  </tr> 
 </tbody> 
</table>

### Ajax： ###

async JavaScript and xml 异步的js和xml  
客户端js中的方法，用来向服务器端发送请求，还可以传递给服务器端数据，然后把服务器端的内容获取到  
Ajax一般是运行在客户端浏览器上的

xml：可拓展的标记语言（在xml中使用的标签都是自己扩展的），利用自己扩展的有规则的标记来存储相关的数据

### Ajax四步： ###

> 第一步：var xhr = new XMLHttpRequest;

创建一个Ajax对象，但是在IE6及以下版本的浏览器不支持

> 第二步：xhr.open(“get”, “/data.txt”, false,\[username\],\[userpass\]);

发送前的基本信息配置  
参数：  
配置请求的方式，包括：get、post、put、delete、head……  
打开一个URL地址：配置向哪一个服务器地址发送请求  
同步或者异步，true是异步，false代表同步，默认是true  
\[username\]：向服务器提供请求的用户名  
\[userpass\]：向服务器提供请求的用户密码，这两个值一般不写，只有服务器做了安全限制，只允许特定的用户进行访问的话，才传递过去

> 第三步：xhr.onreadystatechange = function

给onreadystatechange这个事件绑定一个方法，监听状态的改变，只要状态改变，就会触发方法执行  
xhr.readyState：Ajax状态码，可以代表当前Ajax处理的进度，一共有5个值：  
0：UNSENT，当前的请求还没有发送  
1：OPENED，URL地址已经打开，发送前的参数配置已经完成  
2：HEADERS\_RECEIVED，响应头信息已经接收  
3：LOADING，主要返回的内容正在服务器端准备处理  
4：DONE，响应主体的内容已经成功返回到客户端

xhr.status：HTTP网络状态码，描述了服务器响应内容的状态  
200 或者 以2开头的三位数字 ：都代表响应主体的内容已经成功返回  
301：永久重定向/永久转移  
302：临时重定向/临时转移 服务器的负载均衡  
304：本次获取的内容是读取缓存中的数据  
400：参数发生错误，客户端传递给服务器端的参数出现错误  
401：无权限访问  
404：客户端访问的地址不存在  
500：未知的服务器错误  
503：服务器已经超负荷，如一台服务器能承受10000人，第10001人访问，如果没有做服务器的负载均衡，那么这个人的状态就是503

> 第四步：xhr.send();

参数是请求主体中传递给服务器的内容

<table> 
 <tbody> 
  <tr> 
   <td><b>2.Ajax兼容处理及惰性思想</b></td> 
  </tr> 
 </tbody> 
</table>

### 惰性思想 ###

能够执行一次就搞定的绝对不会执行多次

<table> 
 <tbody> 
  <tr> 
   <td><b>3.Ajax中的http请求方式</b></td> 
  </tr> 
 </tbody> 
</table>

### HTTP METHOD ###

客户端向服务器端发送请求的方式，以下请求方式都可以向服务器传递数据，也可以向服务器获取数据，而且从本质上讲，以下方式没有任何区别。例如：用post做的事情，get也能做，而区别都是开发者们约定俗成的规范。

> get：一般应用于从服务器获取数据，给服务器的数据少，从服务器拿的数据多，项目中最常用的请求方式  
> 使用get请求给服务器传递内容，一般使用url问号传参方式  
> xhr.open(“get”,”/getList?num=12”);

> post：一般应用于向服务器推送数据，给服务器的数据多，从服务器拿的数据少  
> 一般使用请求主体的方式传递给服务器  
> xhr.open(“post”,”/getList”);  
> xhr.send(‘\{“name”:”abc”,”age”:7\}’);

> put：一般应用于给服务器上增加资源文件，如上传图片功能

> delete：一般应用于从服务器上删除资源文件

> head：一般应用于只获取服务器的响应头信息

### get和post请求的区别； ###

**大小问题：**  
get请求传递给服务器的内容存在大小限制，而post理论上没有限制  
原因：get请求通过URL传参给服务器，而每个浏览器对于URL的长度存在限制，谷歌：8kb；火狐：7kb；IE：2kb的长度限制，如果URL的长度超过限制，浏览器会把超出的部分截取  
**缓存问题：**  
get请求会出现缓存，这个缓存不一定是304，post是没有缓存的  
在项目中，get请求一般不会让其出现缓存  
清除缓存：在URL的末尾追加一个随机数  
xhr.open(“get”,”/getList?num=12&\_=”+Math.random());

**安全问题：**  
一般来说get不安全，而post相对安全一些

<table> 
 <tbody> 
  <tr> 
   <td><b>4.Ajax中的同步编程和异步编程</b></td> 
  </tr> 
 </tbody> 
</table>

同步（SYNC）和异步（ASYNC）编程  
JS是属于单线程的，最好使用异步编程，如：定时器、事件绑定、回调函数也可以理解为异步编程、在Ajax中可以使用异步编程

### 定时器 ###

var count = 0;
    window.setTimeout(function () { 
        count++;
        console.log(count); //1
    }, 1000);
    console.log(count); //0

第一次输出0；第二次输出1

var count = 0;
    window.setTimeout(function () { 
        count++;
        console.log(count); //1
    }, 0);
    console.log(count); //0

第一次输出0；第二次输出1  
定时器的事件设置为0，也不是立马执行，谷歌约为5-6ms，IE为10-13ms

var count = 0;
    window.setTimeout(function () {
        count++;
        console.log(count);
    }, 0);
    console.log(count);
    while (1) {
    
    }

只输出一次0  
定时器设定1000ms后执行，不一定到达时间就执行，如果当前浏览器的线程被占用（现在被死循环占用），定时器就要一直等着

先输出B，再输出A  
多个定时器，如果执行完成循环都到达时间了，定时器先执行时间短的这个定时器

### Ajax ###