AJAX概述

一：AJAX概述

AJAX全称为Asynchronie JavaScript And XML,异步JS和XML

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

XMLHttpRequest 只是实现 Ajax 的一种方式。

AJAX 应用

        运用 XHTML+CSS 来表达资讯；

        运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；

        运用 XML 和 XSLT 操作资料;

        运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；

        注意：AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的

XML标记语言

XML 是一种标记语言，很类似 HTML， 设计宗旨是传输数据，而非显示数据，XML 标签没有被预定义,具有自我描述性,是 W3C 的推荐标准。

AJAX 的特点
优点 ：可以无需刷新页面而与服务器端进行通信，允许你根据用户事件来更新部分页面内容
缺点：没有浏览历史，不能回退，存在跨域问题（同源），对SEO 不友好。

HTTP 是超文本传输协议，它是 TCP/IP 协议集中的一个应用层协议，是客户端与服务端进行交互时必须遵循的规则。它用于定义 Web 浏览器与 Web 服务器之间交换数据的过程以及数据本身的格式，底层是靠 TCP 进行可靠地信息传输。客户端向服务端发送 HTTP 请求返回的完整过程：

 http请求报文解析：

POST /user HTTP/1.1                       // 请求行
Host: www.user.com
Content-Type: application/x-www-form-urlencoded
Connection: Keep-Alive
User-agent: Mozilla/5.0.                  // 以上是请求头
（此处必须有一空行 |                         // 空行分割header和请求内容 
name=world                                // 请求体(可选，如get请求时可选)


//请求行
method url
GET /product_detail?id=2
POST /login
//多个请求头
Host: www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded 或者application/json
空行
//请求体
username=tom&pwd=123
{"username": "tom", "pwd": 123}

 http响应报文解析：

//响应状态行
status statusText
//多个响应头
Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/
空行
//响应体
html 文本/json...

原生AJAX 的基本使用 XHR:

1.准备工作：安装node.js
Node.js 中文网
2.安装express（服务端框架） Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网
3.初始化环境：npm init --yes

4.下载express包：npm install express --save

5.编写js代码

        //创建xhr对象
        let xhr = new XMLHttpRequest();
        //调用open函数
        xhr.open('get', '请求URL')
        //调用send函数
        xhr.send()
        //监听事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //获取成功
                console.log(xhr.responseText);
            }
        }

接收响应，处理数据

// xhr.responseXML 接收 xml格式 的响应数据
// xhr.responseText 接收 文本格式 的响应数据
xhr.onreadystatechange = function(){
  // readystate 是 xhr 对象中的属性，表示状态
  if(xhr.readyState === 4){
    //响应状态码 200  404  403 401 500 2xx都表示成功 一般是200
    if(xhr.status >= 200 && xhr.status < 300){
      xhr.status
      xhr.statusText
      xhr.getAllResponseHeaders()
      xhr.response
    } else {
        //其它处理
    }
  }
}