第二天AJAX

1.ajax概念

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

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

传统网站（不使用ajax），如果需要更新内容，必须重载整个网页页面。

2.ajax的优、缺点

（1）优点

1. 用户体验好，对用户的操作做出及时的响应
2. 不中断用户的操作的情况下与服务器通信
3. 大大提升web程序性能
4. 大大减轻web服务器和宽带的压力

（2）缺点

1. 前进后退被破坏
2. XMLHTTPRequset(不支持IE5以下版本)

3.ajax的同、异步

Async异步：

1. AJAX是与服务器交换数据并更新部分网页的艺术，在不加载整个网页的情况下，对网页的一部分进行更新（局部更新）

传统网站：服务器，把整个网站打包发给你。

少量：数据（按需给你）

2. 传统网站，浏览器—> 服务器

用户想看到页面需要有一个等待的过程，用户在等待过程中，什么都做不了，看到的是空白的页面（同步）；

浏览器：显示页面，发送请求，接收响应

有啦ajax以后：浏览器只负责显示页面，ajax负责发送请求，接收响应

**同步：**同一时间只能做一件事，
**异步：**同一事件可以做多件事( 执行耗时操作，晚会儿再执行) setTimeout()

异步：

1. 发请求
2. ajax发请求（XHR）
3. 执行其他操作

4.ajax编写步骤

1. 创建XMLHttpRequest对象；
2. 设置请求参数
3. 发送请求
4. 接收响应

AJAX的核心对象：XMLHttpRequest。

 		1. 创建对象 
        let xhr = new XMLHttpRequest();
         2. 属性
         readystate:  响应状态码（0,1,2,3,4)     4代表响应完成
         status： 判断是否响应成功（404,200）  200 响应成功
         responseText: 响应回来的数据（字符串形式）

         3. 方法
        open(): 设置请求参数（请求方式，请求的路径，同步异步）

         send():发送请求
        4、事件相关
          onreadystatechange 当 每次状态改变所触发事件处理程序

1、创建XMLHttpRequest对象
           var xhr = new XMLHttpRequest(); //1
 2、设置请求参数
        // 参数一：请求方式
        // 参数二：发往服务器的路径 
        // 参数三：设置同步或者异步（默认是true，true代表异步）
        xhr.open('get','03_demo.php',true);//2

 3、发送请求
        xhr.send();//3

 4、接收响应
        // 当每次状态改变所触发事件处理程序
        xhr.onreadystatechange = function(){
            // 响应完毕&&响应成功
           if (xhr.readyState==4&&xhr.status==200) {
            //    xhr.responseText就是服务器代码中echo
               console.log(xhr.responseText);//响应数据（字符串）  
           }
        }

5.发送get请求和post请求的区别

1. get请求
   在数据交互中，我们经常会使用GET请求来查询数据

	xhr.open(options.type,options.url+'?'+params,options.isAsync);
	xhr.send();

2. post请求
   ajax中，我们通常使用POST方法来进行提交数据

	xhr.open(options.type,options.url,options.isAsync);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(params);

注意点：

1. Content-type 需要设置为请求主体类型
2. send 方法接收可选参数作为请求主体，及发送到服务器的内容。