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