1、AJAX:是一种在无需重新加载整个网页的情况下能够更新部分网页的技术
AJAX=异步JavaScript和XML
同步:阻塞。必须等前面的程序执行完毕以后才能执行后面的程序
异步:非阻塞。前面程序是否执行完毕不影响后面程序执行
2、创建XMLHttpRequest对象:
var xmlhttp;
if (window.XMLHttpRequest){
//IE7+、Firefox、Chrome、Opera、Safari浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
//IE6、IE5浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
3、JavaScript错误-throw、try和catch:
try{
执行的代码;
throw new Error("错误文本信息");
}catch(error){
补救的代码;
}
4、向服务器发送请求:使用XMLHttpRequest对象的open()和send()方法
1)open()方法:规定请求的类型、URL以及是否异步处理请求
语法:open(method,url,async)
method:请求的类型。get或post
url:文件在服务器上的位置
async:true(异步)或false(同步)
2)send()方法:将请求发送到服务器
5、onreadystatechange事件:1)当请求被发送到服务器时,我们需要执行一些基于响应的任务
2)每当readyState改变时就会触发onreadystatechange事件
3)readyState属性存有XMLHttpRequest的状态信息,从0到4发生变化
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成且响应已就绪
status:状态码
6、服务器响应:使用XMLHttpRequest对象的responseText或responseXML属性
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
7、get请求和post请求:
1)get请求:直接将数据以查询字符串的格式拼接在url后面进行传输
优点:简单方便
缺点:不安全、有最大限制、不能上传
2)post请求:通过浏览器内部传输数据。表单在进行post提交数据的时候设置请求头,提交的数据格式默认是enctype="application/x-www-form-urlencoded"
优点:安全、理论上没有最大限制、可以上传
8、封装AJAX
function ajax({method = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(method == "get" && data){
url += "?" + data + "&" + new Date().getTime();
}
xhr.open(method, url, true);
if(method == "get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//处理下载完数据的方式都是一样的
/*
如何去处理下载完成的数据不确定
具体要写什么代码不确定
回调函数 把函数当做参数传入
*/
if(success){
success(xhr.responseText)
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}