js---Ajax

一、Ajax简介

• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

1. 什么是 AJAX ？

• 原生的Ajax，也就是异步的编程(异步的请求和xml)，也叫局部刷新技术。
• AJAX = 异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。
  通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。> - 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
• 比如微信朋友圈点赞或者评论就是使用了Ajax。

2. AJAX 工作原理

3. 使用场景

• 前后端分离项目开发的核心，前端+Ajax+后端api接口可以实现前后端数据交互。

4. 优点

• 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（就是在不刷新整个网页的情况下，加载后台数据，实现网页数据更新）

二、AJAX—创建 XMLHttpRequest 对象

1. XMLHttpRequest 对象

• 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
• XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2. 创建XMLHttpRequest对象

    //定义变量接收整个请求对象
    var http;
    //是否存在兼容性问题
    if(window.XMLHttpRequest){
        http=new XMLHttpRequest();
    }
    else{
        //不存在使用ActiveXObject对象(IE5和IE6使用)
        http=new ActiveXObject("Microsoft.XMLHTTP");
    }
    console.log(http);//输出的是XMLHttpRequest对象 

三、AJAX—向服务器发送请求(五步法)

1. 创建请求对象

    //定义变量接收整个请求对象
    var http;
    //是否存在兼容性问题
    if(window.XMLHttpRequest){
        http=new XMLHttpRequest();
    }
    else{
        //不存在使用ActiveXObject对象(IE5和IE6使用)
        http=new ActiveXObject("Microsoft.XMLHTTP");
    }
    console.log(http);//输出的是XMLHttpRequest对象 

2. 建立服务器连接

• 建立服务器连接使用 XMLHttpRequest 对象的 open() 方法
• open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
• 参数1：method—当前请求接口的类型，GET（常用，任何形式都可以）、POST（常用，任何形式都可以）、DELETE(删除)、PUT(添加)、UPDATE(修改)；
• 参数2：url—文件在服务器上的位置(后端api的接口，api程序应用集)；
• 参数3：async—true（异步）或 false（同步），默认是异步请求

（1）什么是同步、异步？

• 同步：等待Ajax请求完成之后继续执行后续代码（不建议使用）–async=false
• 异步：Ajax请求和后续代码同时执行（不需要等待）–async=true
• 注：原生js不能使用同步，因为浏览器限制（js是单线程），浏览器会直接报警告。

（2）使用GET 还是 POST？

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
• 然而，在以下情况中，请使用 POST 请求：
• a. 无法使用缓存文件（更新服务器上的文件或数据库）
• b. 向服务器发送大量数据（POST 没有数据量限制）
• c. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

    http.open('get',''); 

3. 发送请求

• 请求发送到服务器，使用 XMLHttpRequest 对象的send() 方法
• send(string) ：将请求发送到服务器。
• 参数：string—仅用于 POST 请求（请求数据在send的参数上），如果请求类型为GET,send()不写参数

    http.send(); 

4. 监听请求

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪
status	200: “OK”；404: 未找到页面；500：服务端报错

    http.onreadystatechange=function(){
        if(http.readyState==4&&http.status==200)
        {
            console.log("数据");
        }
    } 

5. 数据渲染

    http.onreadystatechange=function(){
        if(http.readyState==4&&http.status==200)
        {
            //数据渲染
            console.log(http.response);
        }
    } 

四、请求网页到渲染完成的过程

• 电脑网址栏输入网址显示对应的页面，中间发生了什么
• 比如：输入网址http://www.baidu.com
• 第一步：将浏览器进行dns解析，将域名解析成ip地址（即将远程地址进行dns解析成服务共用地址，dns是将远程地址解析成ip地址的过程）
• 第二步：先解析，浏览器再通过TCP协议三次握手和服务器进行连接。
• 第三步：浏览器发送请求（ip，端口号），发送get请求
• 第四步：服务器接收请求，再找相对应的页面，请求响应，状态码200
• 第五步：浏览器接收到响应请求，对响应的数据进行解析渲染，绘制到浏览器。