ajax基础概念以及其用法和函数的封装

传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
在这里出现了两个概念，同步请求和异步请求，
同步请求：请求完成后再去执行后续代码；
异步请求：请求与后续代码同时执行；

ajax原理：通过xmlHttpRequest对象来向服务器发送异步请求，并从服务器获得数据，然后通过javascript操作DOM而更新页面；

xmlHttpRequest:

在原生js中ajax的使用方法：
1.创建XMLHTTPRequest对象;
2.使用open建立与服务期间的连接；
open（“method”,“url”,“true/false”,“userName”,“password”）;
method:请求方式，分为get/post两种，前者会在链接后有数据，后者没有；
url：路径；
【后三种参数具有可选择性；】
true/false:是否同步，true异步，false同步，但是false情况下主线程会被锁死；
userName：用户名；
password：密码；
3.设置发送的数据，开始和服务器端交互；
send（），括号中内容根据请求方式具有可选择性；
4.注册事件；
readystatus=4,读取完成；
status=200;读取成功；
5.更新界面

var http=new XMLHTTPRequest(); //创建对象
http.open("get","url");
http.send();
http.onreadystatechange=function(){
if(http.readystatus==4&&http.status==200){
console.log(http.responseText);
}
}

将两种请求方式封装

function ajax(method,url,data,success){
var http=new XMLHTTPRequest();
if(open=="get"){
if(data){
url+="?";
url+=data;
}
http.open();
http.send();
}
else{
if(data){
http.send(data)
}
else{
http.send()
}
}
http.onreadystatechange=function(){
if(http.readystatus==4&&http.status==200){
success(http.response); 
//success为ajax函数中的形参，show为实参，http.response为show函数中的实参，imformation为形参
}
}
}
ajax("get","./data/stu.txt",null,show);//调用ajax函数；
function show(imformation){
var namelist=JSON.parse(imformation);
var ul=document.createElement("ul");
for(var i=0;i<namelist.length;i++){
var li=document.createElement("li");
li.innerHTML="姓名："+namelist[i].name+" "+"年龄："+namelist[i].age+" "+"性别："+namelist[i].sex+" "+"地址："+namelist[i].add;
}
ul.appendchild(li);
document.body.appendchild(ul);
}