原生ajax以及jQuery中的ajax

js原生ajax以及jQuery中的ajax

         ajax 即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。
ajax优点：
         1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求。
         2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
ajax缺点：
        1.没有前进后退功能，破坏了浏览器的导航机制，这是ajax最大的缺点
         2.ajax大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。

原生ajax的API详解
    xhr.open() 发起请求，可以是get、post方式

    xhr.setRequestHeader() 设置请求头

    xhr.send() 发送请求主体get方式使用xhr.send(null)

    xhr.onreadystatechange = function () {} 监听响应状态

//1.浏览器内建对象，用于在后台与服务器通信(交换数据)
var xhr = new XMLHttpRequest();

//2.设置请求行 open (请求方法, 请求url)
//get请求如果有参数就需要在url后面拼接参数
//post请求在请求体中传递
xhr.open('get', 'index.PHP?'+name);

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

//4.设置 请求体: 发送请求  send(参数: key=value&key=value)
//如果有参数,post应该在这个位置来传递参数
//对于get请求不需要再这个位置来传递参数
xhr.send(null);

//5.监听异步对象响应状态 readystate
xhr.onreadystatechange = funciton () {
  if(xhr.readyState == 4 && xhr.status == 200) {
   	var result = document.querySelect('.result');
    result.innerHTML = xhr.responseText;
  }
}

jQuery中的Ajax

$.ajax({}) 可配置方式发起Ajax请求

$.get() 以GET方式发起Ajax请求

$.post() 以POST方式发起Ajax请求

$('form').serialize()序列化表单（即格式化key=val&key=val）

url 接口地址

type 请求方式

timeout 请求超时

dataType 服务器返回格式

data 发送请求数据

beforeSend:function () {} 请求发起前调用

success 成功响应后调用

error 错误响应时调用

complete 响应完成时调用（包括成功和失败）

$.ajax({
  type:'post', //请求方式
  url:'./server/nav-json.PHP', //请求url
  data:{}, //请求需要传递的参数
  timeout: 3000, //请求超时: 单位为毫秒,如果服务器的响应时间超过了指定的时间,请求失败
  dataType: 'json', //设置响应数据的格式 xml json text html script jsonp

  beforeSend: function () { //发送请求之后的回调,在这个回调之中我们可以进行求情之前的相关操作,如验证
    //输入内容, 实现验证
  	//在这个回调中,如果返回return false,则本次请求停止

  }
  success: render, //render没有定义,是一个函数 //请求成功之后的回调
  errot: function (e){
  	if (e.statusText == ""timeOut) {
      alert("请求超时请重试");
  	}
  },
  complete: funciton () { //无论成功失败都执行的回调
  	  
  }    
})