AJAX知识整理

AJAX

Asynchronous Javascript And XML ( 异步的JS和XML )
AJAX异步发送一个HTTP请求，去后端获取数据，带回给前端浏览器，让浏览器处理。
AJAX不是一门技术，是一整套技术体系包含HTML、CSS、DOM、BOM、JSON等

Ajax概述

它是浏览器提供的一套方法，可以实现页面无数据更新，提高用户浏览网站应用的体验。

Ajax的应用场景

1.页面上拉加载更多数据
2.列表数据无刷新分页
3.表单项离开焦点数据验证
4.搜索框提示文字下拉列表

Ajax运行原理及实现

Ajax的实现步骤
1.创建Ajax对象

    var xhr = new XMLHttpRequst();

2.绑定事件

    xhr.onreadystateChange = function(){
     			//xhr.readyState 是一个属性，具有5个值
     			 0   未初始化
     			 1   调用了open()方法
     			 2   已经接收到响应头
     			 3   解析了一部分数据，不一定解析完毕
     			 4   解析完毕全部数据，数据可以使用了
     			  if(xhr.readyState === 4){
     			  		//通过xhr.resoponseText 获取返回的数据
     			  		alert(xhr.responseText)
     			  }
}	

3.调用open()方法：告诉Ajax请求地址以及请求方式

xhr.open('get', 'http://www.example.com', true);

4.调用send()方法：负责望请求正文中添加数据（如果是post请求，需把数据往send里传递）

xhr.send();

请求参数传递

GET请求方式
     xhr.open(‘get’, ‘http://www.example.com?name=zs&age=20’);
參数名称=参数值&參数名称=参数值
POST请求方式
//设置请求参数格式的类型（post请求必须设置）
     xhr.setRequesHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
     xhr.send(‘name=zs&age=20’);

封装get和post请求

//封装在js中
var AJAX = {
    get(url, data, callback){
        var querystring = "";
        for(var i in data){
            //username=xwen&password=1123343;
            querystring += i + "=" + data[i] + "&";
        }
        //截取字符串，不需要最后的&
        querystring = querystring.slice(0, -1);
        //1.初始化ajax对象
        var xhr = new XMLHttpRequest();
        //2.监听状态
        xhr.onreadystatechange = function(){
            if(this.readyState === 4){
                var obj = xhr.responseText;
                callback(obj);
            }
        }
        //3.监听路径和方式
        //true参数：代表异步传输
        xhr.open('get', url + "?" + querystring, true);
        //4.发送请求
        xhr.send();
    },

    post(url, data, callback){
        var querystring = "";
        for(var i in data){
            querystring += i + "=" + data[i] + "&";
        }
        querystring = querystring.slice(0, -1);
        //1.初始化ajax对象
        var xhr = new XMLHttpRequest();
        //2.监听状态
        xhr.onreadystatechange = function(){
            if(this.readyState === 4 && this.status === 200){
                callback(xhr.responseText);
            }
        }
        //3.监听路径和方式
        xhr.open('post', url, true);
        //将请求头内容更改,改为表单的内容类型
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8");
        //4.发送请求
        xhr.send(querystring);
    }
}


**在html中传数据**
var info = {
    username:"xwena",
    password: "12233"
}
 AJAX.get("http://localhost:90//get.php",info, function(data){
   console.log(data);
 });

AJAX.post("http://localhost:90//post.php",info, function(data){
    console.log(data);
})

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState：是一个属性共有5个值

0	请求未初始化（还没有调用 open()）
1	调用了open方法，服务器连接已建立 （还没有调用 send()）
2	请求已接收，正在处理
3	请求处理中
4	请求已完成，切响应已就绪

status

1xx	信息响应类，表示接收到请求并且继续处理
2xx	处理成功响应类，表示动作被成功接收、理解和接受
3xx	重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx	客户端错误，客户请求包含语法错误或者是不能正确执行
5xx	服务端错误，服务器不能正确执行一个正确的请求