Ajax的原生JS实现方式(XMLHttpRequest)和JQuery实现方式($.ajax())

AJAX：ASynchronous Javascript And XML
异步的Javascript和XML

AJAX是一种用于创建快速动态网页的技术
是一种在无需重新加载整个网页的情况下 更新部分网页的技术

通过在后台与服务器进行少量数据交换 可以使网页进行异步更新
也就是可以在不重新加载整个网页的情况下 对网页的某部分进行更新
可以提升用户的体验

同步和异步的区别：

同步：在客户端发送请求给服务器端的期间 客户端必须等待服务器端的响应 在等待的期间客户端不能做其他操作
例如按钮无法点击 输入框无法输入

异步：在客户端发送请求给服务器端的期间 客户端不需要等待服务器端的响应 在服务器处理请求的过程中 客户端可以进行其他操作

---

一、原生JS实现方式

在实际开发中该方式并不常用 因为较为麻烦

1、创建对象

var xmlhttp;
if (window.XMLHttpRequest)
{// 兼容IE7+ 和 Firefox 和 Chrome 和 Opera 和 Safari
	xmlhttp=new XMLHttpRequest();
}
else
{// 兼容IE6或IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2、建立连接

语法：xmlhttp.open(请求方式,请求URL路径,true异步请求false同步请求);
例：

xmlhttp.open("GET","test1.txt",true);

若为GET方式 则请求参数在URL后拼接 下方的send()方法为空参
若为POST方式 则请求参数在下方的send()方法中填写 URL后无需拼接

3、发送请求

语法：xmlhttp.send(字符串键值对);
例：

xmlhttp.send("username=Piconjo");

4、接收并处理来自服务器的响应结果

获取方式：xmlhttp.responseText
返回的是字符串

当服务器响应成功时获取
当xmlhttp对象的readystatechange就绪状态改变时即触发事件

xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
	 	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}

readyState：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成 且响应已就绪

status：
200: “OK”
404: 未找到页面

---

二、JQuery实现方式

1、$.ajax() 发送AJAX请求

语法：$.ajax({键值对})
例：

function submit() {
    $.ajax({
        url:"ajaxServlet", //请求路径
        type:"POST", //请求方式
        // data:"username=Piconjo&password=123456",//请求参数
        data:{
            "username":"Piconjo",
            "password":"123456"//请求参数
        },
        success:function (data)//请求响应成功后的回调函数
        {
            alert(data);
        },
        error:function ()//请求响应出错后的回调函数
        {
            alert("出错了");
        },
        dataType:"json"//服务器预期返回的数据类型
    })
}

键值对参数：

请求路径(url)：url:"ajaxServlet"

请求方式(type) ：type:"POST"

请求参数(data)：data:"username=Piconjo&password=123456"
或：

data:{
"username":"Piconjo",
"password":"123456"
}

请求响应成功之后的回调函数(success) ：

success:function (data)
{
	alert(data);
}

请求响应出错之后的回调函数(error) ：

error:function ()//请求响应出错后的回调函数
{
	alert("出错了");
}

服务器预期返回的数据类型(dataType)：dataType:"json"
参数值：
“xml”: 返回XML文档 可用 jQuery 处理
“html”: 返回纯文本HTML信息 包含的script标签会在插入dom时执行
“script”: 返回纯文本JavaScript代码
“text”: 返回纯文本字符串
“json”: 返回JSON数据
“jsonp”: 返回JSONP格式数据
注：使用JSONP形式调用函数时 如"myurl?callback=?"
jQuery将自动替换?为正确的函数名以执行回调函数

2、$.get() 发送GET请求

发送GET请求
语法：$.get(url, [data], [callback], [type])
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

例：

$.get("ajaxServlet",{username:"Piconjo",password:"123456"},function (data) {
												                alert(data);
												            },"json")

3、$.post() 发送POST请求

发送POST请求
语法：$.post(url, [data], [callback], [type])
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

例：

$.post("ajaxServlet",{username:"Piconjo",password:"123456"},function (data) {
												                alert(data);
												            },"json")

---