Ajax

原生js实现Ajax参照参照示例：http://www.w3school.com.cn/php/php_ajax_xml.asp

ajax全称 Asynchronous JavaScript And Xml 是一种应用于Web开发的前后端数据交互方式
百度百科解释： 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作
上述百度的解释就指出了Ajax最强大之处—> 异步交互

同步与异步请求

在不使用Ajax的情况下，用户操作页面时每一次请求都需要刷新整个页面去请求服务器数据，此时页面会进入类似“ 假死 ”的状态，用户在界面加载过程中无法进行任何的其他操作，从而极大的降低了用户体验。

而使用Ajax操作，用户的请求可以进行局部刷新 不需要重载整个页面就能将数据呈现在网页上这也是Ajax的最大亮点

Ajax全称中有一个单词Asynchronous，会发现在Java多线程中的同步锁synchronized与之类似。

在多线程中我们可以使用synchronized来保证线程安全，即同一时刻只能由一条线程访问被synchronized锁住的资源，而其他线程将会进入阻塞状态，从而实现了线程同步
那么放到Ajax中来谈，Ajax异步请求可以保证用户在向服务器发送请求之后继续进行其他操作，等到之前的请求响应回来之后再进行操作。

但是一定要将多线程的同步和Ajax的同步异步区分开来，两者并不是同一概念

当然Ajax也同样支持同步请求：
async( 是否异步 )：false 即为同步
async: true 即为异步
通常情况下，默认为异步(async为true)

使用Ajax

使用JS实现Ajax

原生js已经提供了Ajax的函数 而XMLHttpRequest就是Ajax的核心对象

// 创建xmlHttpReuquest对象
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

XMLHttpRequest方法

new XMLHttpRequest()  // 创建对象
abort()   // 取消当前请求
getAllReponseHeaders()   // 获取所有头部信息
getReponseHeader()    // 获取指定头部信息
open(method,url,async,user,pwd)   /*method: 请求方式：  get或posturl : 请求的地址async:  是否异步
*/
send()  // 发送请求
setRequestHeader()  // 向要发送的报头添加信息  键值对

XMLHttpRequest状态码

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

XMLHttpRequest返回请求的状态号

status200: "OK"403: "Forbidden"404: "Not Found"

以上关于XMLHttpRequest了解即可，几乎不再使用

使用JQ实现Ajax

下面是JQ提供的常用实现ajax的异步请求函数

/*
1. $.ajax() --> 可以设置更多参数实现细节操作  默认为get请求
2. $.getJson()  --> 返回数据类型为Json格式
3. $.get()   --> 常用于获取数据
4. $.post()  --> 常用于提交数据
*/

$.ajax()

$.ajax({type : "" // get post url : "" // 请求地址async : ""  // 是否异步  true异步  false同步date : ""  // 发送到服务器的数据dateType : "" // 服务器返回的数据类型contentType : "" // 设置请求头success : ""   //请求成功时调用此函数error : ""    // 请求失败时调用此函数
}) ;

$.getJson()

$.getJson('url',function(result){// 代码块
})

$.get

$.get('url',{发送数据},function(result){// 代码块  result即为获取到服务器的响应/*1. URL:请求地址2. data：发送给服务器的数据3. callback：回调函数，请求成功后执行4. dataType：服务器返回的数据类型*/
})

$.post

$.post('url',{发送数据},function(result){// 代码块
})