AJAX——异步请求

一、简介 

1.功能简介 

ajax:全称“Asynchronous JavaScript and XML”（异步JavaScript和XML）， 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

主要用来做半动态项目，用来连接前后端，达到更良好的用户体验。

2.优势

传统web交互缺点：流量损耗大；缓存过多。

ajax：局部刷新，在不重新加载整个网页的情况下，对网页的某部分进行更新。

           流量损耗小；缓存小。

二、aiax的对象

XMLHttpRequest对象：是ajax的基础，用于在后台与服务器交换数据，在不重新加载页面的情况下，对网页的某部分进行更新，具有自己的api（封装接口）。

XMLHttpRequest对象的方法：

abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

 重要方法参数解释：

open方法

method：请求类型	get读数据,获取 post修改数据，新建 put更新
url:路径	本地路径或远程api
asyncFlag默认异步	true异步 flase同步
username	用户名
password	用户密码

三、ajax使用五步法

<1>五步法

1.实例化对象

var http=new XMLHttpRequest()；

2.使用open方法建立联系

http.open("method"，"url","asyncFlag");

3.发送请求send(content)

注：content可写可不写：写传输数据，不写请求数据

http.send();

4.获取服务器相应的数据，建立事件

http.onreadystatechange=function();{
console.log（http）;
}

结果跑3次，原因是因为有三个读取状态码：2 开始读，3 解读中，4 读结束。

http.status：网页状态码

200	请求成功
500	服务器报错
400	页面丢失

 5.渲染界面

http.onreadystatechange=function(){
if(http.readystate==4){
var data=JSON.parse(http.response);
console.log(data);
}
}

<2>实例

var http=new XMLHttpRequest();
http.open("get","./list/data.txt");
http.send();/* *服务器开始响应 * */
http.onreadystatechange=function (){ /* * readyState 读物的状态码 2 3 4 * */
    if(http.readyState==4)
    {
        var data=JSON.parse(http.response);
        console.log(data);//获取数据 /* * response 数据 * responseText 数据 * */
    }
}

四、封装原生ajax

API封装方法：用java asp php nodejs后端代码封装

1.传值方式

get方式传值方式：在URL路径之后以？a=1&b=2&c=3的形式传值
post：在send（）上发送数据

2.封装

function method(res, url, data, callback) {
    var http = new XMLHttpRequest();
    if (res == "get") {
        if (data) {
            url += "?";
            url += data;
        }
        http.open(res, url);
        http.send();
    }
    else {
        http.open(res, url);
        if (data) {
            http.send(data);
        }
        else {
            http.send();
        }
    }
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            callback(JSON.parse(http.response));
        }
    }
}
method("post", "./list/data.txt", null, function (data) {
    console.log(data);
});

五、同步与异步的区别

1.

同步：等待请求完成后执行代码，
异步：代码和请求同时执行

2.实例

 同步：

 var data=null;
 var http = new XMLHttpRequest();
 http.open("get", "./list/data.txt",false);
 http.send();
 http.onreadystatechange = function () {
 if (http.readyState == 4 && http.status == 200) {
 console.log(1);
 }
 }
 console.log(2);

注：同步会报警告，因为js是单线程，导致线程停止。

  异步：

 var http = new XMLHttpRequest();
 http.open("get", "./list/data.txt", rue);
 http.send();
 function showdata(callback) {
 http.onreadystatechange = function () {
 if (http.readyState == 4 && http.status == 200) {
 callback(http.response);
 }
 }
 }
 showdata(function (data) {
 console.log(data);
 });

注：这里利用封装方法callback拿到异步外面的数据。

六、远程地址与本地地址的区别

<1>释义

本地地址：DHCP分配或手动设定的IP地址，一般为私网地址。
本地端口号：常见的服务对应的端口：ftp：23，telnet：23，smtp：25，dns：53，http：80，https：443，还有更多的端口号对应特定的网络程序，可在其设置里查看或修改。
远程地址：公网地址，与本地地址有临时的绑定关系，正是它让我们可以网上冲浪。
远程端口号：作用和原理与相同，数值一般也相同。

<2>如何做远程接口

1.买域名。

2.买远程服务器。

3.绑定域名与IP，装node、数据库进行项目部署。