XMLHttpRequest

Ajax 是一种技术方案，但并不是一种新技术，它依赖的是现有的 Css / Html / JavaScript。

其中最核心的依赖是浏览器提供的 XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

用一句话来总结两者的关系：我们使用 XMLHttpRequest对象 来发送一个Ajax请求。

------------------------------------------------------------------------------------------------

异步请求ajax的使用在前后台传递数据，优化用户体验起着至关重要的角色

一、原生JS中的Ajax：

1、使用ajax发送数据的步骤

第一步：创建异步对象

var xhr = new XMLHttpRequest();

第二步：设置 请求行 open(请求方式，请求url):

xhr.open("get","validate.php?username="+name);  // get请求如果有参数就需要在url后面拼接参数，
xhr.open("post","validate.php");  // post如果有参数，就在请求体中传递

第三步：设置请求头（GET方式忽略此步骤）: setRequestHeader()

// get不需要设置
// post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：设置请求体 send()

xhr.send(null);  // get的参数在url拼接了，所以不需要在这个函数中设置
xhr.send("username="+name);  // post的参数在这个函数中设置(如果有参数)

第五步：让异步对象接收服务器的响应数据

// 一个成功的响应有两个条件：1.服务器的状态码为200（成功响应了）   2.异步对象的响应状态为4(数据解析完毕可以使用了)
xhr.onreadystatechange = function(){
　　if(xhr.status == 200 && xhr.readyState == 4){
　　　　console.log(xhr.responseText);
　　}
}

 

ajax-get方式请求案例：

var xhr = new XMLHttpRequest();
xhr.open("get","validate.php?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
  if(xhr.status == 200 && xhr.readyState == 4){
    console.log(xhr.responseText);
    document.querySelector(".showmsg").innerHTML = xhr.responseText;
  }
}

ajax-post方式请求案例：

var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
  // 判断服务器是否响应，判断异步对象的响应状态
  if(xhr.status == 200 && xhr.readyState == 4){
    document.querySelector(".showmsg").innerHTML = xhr.responseText;
  }
}

 

二、Jquery中的Ajax

$.ajax({
　　type:"get", // get或者post
　　url:"abc.php", // 请求的url地址
　　data:{}, //请求的参数
　　dataType:"json", //json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了
　　timeout:3000, //3秒后提示错误
　　beforeSend:function(){
　　　　// 发送之前就会进入这个函数
　　　　// return false 这个ajax就停止了不会发 如果没有return false 就会继续
　　},
　　success:function(data){ 
　　　　// 成功拿到结果放到这个函数 data就是拿到的结果
　　},
　　error:function(){
　　　　//失败的函数
　　},
　　complete:function(){
　　　　//不管成功还是失败 都会进这个函数
　　}
})

// 常用，如：
$.ajax({
　　type:"get",
　　url:"",
　　data:{},
　　dataType:"json",
　　success:function(data){
　　　　// 回调
　　}
});

 
$.ajax() 都可以发
$.post(url,data,success,datatype):本质上只能发送post请求
$.get(url,data,success,datatype):本质上只能发送get请求

----------------------------------------------------------------------------

jquery中ajax请求的使用和四个步骤示例

ajax() 方法用于执行 AJAX（默认是异步 HTTP）请求，所有的 jQuery AJAX 方法都使用 ajax() 方法，该方法通常用于其他方法不能完成的请求。

基本的语法是：$.ajax({name:value, name:value, … })

下面是通常使用的示例：

$.ajax({
　　type:'POST', // 规定请求的类型（GET 或 POST）
　　url:uploadV, // 请求的url地址
　　dataType:'json', //预期的服务器响应的数据类型
　　data:{},//规定要发送到服务器的数据
　　beforeSend:function(){ //发送请求前运行的函数（发送之前就会进入这个函数）
  　　// ....
　　},
　　success: function(result){ // 当请求成功时运行的函数
      //...
　　},
　　error:function(result){ //失败的函数
  　　//...
　　},
　　complete:function(){
  　　//请求完成时运行的函数
   　　// ...
　　}
});

如果还需要其他参数，参考下面列举的一下其他的可以用到的名称和值：

名称       值/描述
async 布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType 发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。
context 为所有 AJAX 相关的回调函数规定 “this” 值。
data 规定要发送到服务器的数据。
dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
dataType 预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。
global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp 在一个 jsonp 中重写回调函数的字符串。
jsonpCallback 在一个 jsonp 中规定回调函数的名称。
password 规定在 HTTP 访问认证请求中使用的密码。
processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset 规定请求的字符集。
success(result,status,xhr) 当请求成功时运行的函数。
timeout 设置本地的请求超时时间（以毫秒计）。
traditional 布尔值，规定是否使用参数序列化的传统样式。
type 规定请求的类型（GET 或 POST）。
url 规定发送请求的 URL。默认是当前页面。
username 规定在 HTTP 访问认证请求中使用的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。