Ajax及jQuery对ajax的封装

Ajax

什么是Ajax?

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。

功能：用于实现与服务器进行异步交互的功能。（Ajax技术实现了网页的局部数据刷新）

• Ajax的核心是XMLHttpRequest对象，该对象在使用之前必须用JavaScript来获取。
• AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaScript事件中向服务器发出异步请求，执行更新或查询数据库。
• 当Web服务器的响应返回时，使用JavaScript回调函数和CSS来相应地更新页面的局部内容，而不是刷新整个页面。

客户端发起请求时的异步处理过程：

XMLHttpRequest对象

方法：

（1）open("method","url"); ------>建立与服务器之间的连接

• method是请求的方式（get，post）
• url是远程服务器的地址

（2）send(content)：向服务器发送请求，参数content表示请求数据，可以是null
（3）setRequestHeader("header","value")：设置请求头信息，必须放在open之后调用

属性：

（1）onreadystatechange：指定当请求-响应的状态发生改变时执行的回调函数

（2）readyState：是一个状态值，表示请求-响应完成的状态

（3）responseText：服务器响应的文本

（4）status：服务器返回的状态码(例如：200)

拓展：其他常用状态码

200：表示请求-响应成功,并返回了一个页面

204：表示服务器已经成功处理了请求,但是没有返回任何内容

3开头：表示页面发生了重定向

400：表示服务器不理解客户端的请求语法

403：表示服务器拒绝请求

404：表示找不到请求的资源

500：服务器遇到错误无法完成请求

503：服务器无法使用

（5）statusText：伴随状态码的字符串信息(例如：200 对应的字符串是’ok’)

原生Ajax:

//获取XMLHttpRequest对象  （异步请求对象）  
function getXmlHttpRequest(){
    let xmlHttpRequest;
    if(window.ActiveXObject){     //若是IE浏览器
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){    //非IE浏览器
        xmlHttpRequest=new XMLHttpRequest()
    }
    return xmlHttpRequest;
}

//通过XMLHttpRequest对象向后台发送异步请求
function getServerInfo(){
    //获取ajax的核心对象
    let httpRequest=getXmlHttpRequest();
    //获取到要请求的数据
       //获取数据
    let post_str=数据;

    //调用open方法建立与服务器的连接      -----post请求
    httpRequest.open('post',"http://localhost:3000/index",true);

    //设置请求头信息
    httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    //设置请求-响应状态发生改变时的回调函数
    httpRequest.onreadystatechange=function (){
        if(httpRequest.readyState==4&&httpRequest.status==200){ //请求-响应成功完成
            //获取响应信息
            let info=httpRequest.responseText;
            //将获取到的响应信息写入到页面的标签里
            document.getElementById('msg').innerHTML=info;

        }
    }
    //向服务器发送请求
    httpRequest.send(post_str);       //请求信息  传送到服务器  相当于  chunk
}

jQuery对Ajax的封装

底层封装

这种封装方式使用起来比较灵活。

$('#id').click(function(){
	$.ajax({
		url:"http://localhost:3000/ind",
		type:"post/get",
		data:$('form').serialize(),   //表单序列化
		dataType:'json',
		success:function(result){
			//请求成功后的回调函数。result中存放的是服务器的响应数据
		},
		error:function(err){
			console.log(err)
		}
	})
})

高层封装

post请求

$.post(url,[data],[callback],[type]) //只能进行post请求

• data:待发送的key/value参数
• type:返回内容的格式（xml, html, script, json, text）

例如：

var obj={
	name:'aa',
	age:15
}
$.post("http://localhost:3000/ind",obj,function(result){成功后的处理代码},'json')

get请求

$.get(url,[data],[callback],[type])       //只能进行get请求

参数含义同post请求。

例如：

var obj={
	id:1
}
$.get("http://localhost:3000/home",obj,function(result){成功后的处理代码},'json')