web前端

一、ajax：ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax主要用来请求数据，用远程地址或本地地址来请求数据的，及api程序应用集，
它主要用java，php，asp，nodejs等后端代码来封装的。而前端主要用ajax来做半动态项目（即前端与后端分离，中间通过接口来请求数据）。
二、如何使用ajax：通过xmlhttprequest对象
1、实例化对象

var http=new XMLHttpRequest();

2、要访问对象，需要建立联系
open（）方法
参数；method:get(获取数据)，post（新建或增加数据），put（更新或修改数据 删除数据）
url地址：远程地址和本地地址
async是否异步：true或fale，默认为true异步，否则是false同步
同步和异步的区别：同步是等待请求完成之后在去执行后续代码，异步是请求和后续代码同时执行。
username和userpwd主要用于用户判断。
3.发送请求 send(content)
该方法里面的参数存在时表示向服务器传输数据，不存在是向服务器请求数据。
4.获取服务器响应的数据（使用事件）
若果页面返回的是500，则服务器报错；返回的是404页，则面丢失，返回的是200，则成功，而onreadystatechange则是读取这些状态码的。
readyState（读物的状态码）：2 3 4
5.渲染界面
具体步骤为：

var http=new XMLHttpRequest();
http.open("get","./list/data.txt");
http.send();
http.onreadystatechange=function (){
        if(http.readyState==4)
        {
          var data=JSON.parse(http.response);
          console.log(data);
        }
 }

三、如何将原生ajax进行封装
1、请求接口时候需要：路径、方式、数据
2、 get方式传值是在url路径之后以方式？a=1&b=2&n=3进行传值
3、post方式在send()上发送数据
具体步骤为（先自定义一组数据data）：

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);
    });

四、跨域：js跨域是指通过js在不同的域之间进行数据传输或通信。产生跨域的主要原因是
协议、端口、主机名称的不同而产生跨域。
跨域的方法：
1.通过jsonp跨域（也叫src跨域）:通过传递回调函数来返回数据
2.CORS跨域：全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了ajax只能同源使用的限制。只要给其配置header('Access-Control-Allow-Origin: * ');*代表允许所有域名访问。
例如：

var http = new XMLHttpRequest();
    http.open("post", "http://127.0.0.1:8080/0616/insert.php");
    http.send();
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            console.log(http.response);
        }
    }