jQuery中ajax的相关知识点汇总

 // IE9及以上
 // const xhr = new XMLHttpRequest()
 // IE9以下
 // const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

 // 对于这个兼容写法我们可以用一个函数来封装
 function createXHR() {
 var req = null;
 if (window.XMLHttpRequest) {
 // 如果有这个XMLHttpRequest对象就直接使用
 req = new XMLHttpRequest();
 } else {
 // 否则就使用IE8一下的写法
 req = new ActiveXObject("Microsoft.XMLHTTP");
 }
 return req;
 }
 // 第一步:创建ajax对象
 var xhr = createXHR(); //这样就拿到了一个ajax对象
 // 第二步:配置网络请求信息

 xhr.open('get', './demo.php', true)
 // xhr.open('get/post','要发送网络请求去哪个地址',同步还是异步默认 true 表示异步，false 表示同步)
 // 如果是get请求有参数需要拼接在地址后面,例如'./demo.php?id=2&name=sanqi'
 // 如果是post请求,参数就要放在send()里面,例如:xhr.send('id=2&name=sanqi')
 // 第三步:发送网络请求
 xhr.send() //
 // 第四部:判断响应状态拿到数据
 xhr.onreadyStateChange = function () {
 // 每次 readyState 改变的时候都会触发该事件
 // 我们就在这里判断 readyState 的值是不是到 4
 // 并且 http 的状态码是不是 200 ~ 299
 if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
 // 这里表示验证通过
 // 我们就可以获取服务端给我们响应的内容了
 console.log(xhr.response);
 }
 }

<?php
header('content-type:text/html;charset=utf-8;');
 $id = $_REQUEST['id'];
 $name = $_REQUEST['name'];
 $arr = [
 'id' => $id,
 'name' => $name
 ];
 echo json_encode($arr);
?>

  $.get('./test.php','id=999&name=三七安',function (res) { 
  //第一个参数是请求的地址
  //第二个参数是要发送给服务器的数据
  //第三个参数是成功时的回调函数,里面包含服务返回给我们的数据
  //第四个参数是我们希望拿到的数据格式:有几种选择:json,text,html,xml,script
  console.log(res);
  },'json')

	 $.post('./test.php',{id:123,name:'post请求'},function (res) { 
	 //这里其他参数和get请求一致的
	 //注意,这里的传输数据我用 对象的格式来写,也能发送请求成功,也就是说
	 //无论是get请求还是post请求,想服务端传数据,既可以使用字符串格式也可以使用对象格式
  console.log(res);
  },'json')

 // 使用 $.ajax 方法
 // 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置
 $.ajax({
  url: './ajax', // 必填，请求的地址
  type: 'GET', // 选填，请求方式，默认是 GET（忽略大小写）
  data: {}, // 选填，发送请求是携带的参数
  dataType: 'json', // 选填，期望返回值的数据类型，默认是 string
  async: true, // 选填，是否异步，默认是 true
  success() {}, // 选填，成功的回调函数
  error() {}, // 选填，失败的回调函数
  cache: true, // 选填，是否缓存，默认是 true
  context: div, // 选填，回调函数中的 this 指向，默认是 ajax 对象
  status: {}, // 选填，根据对应的状态码进行函数执行
  timeout: 1000, // 选填，超时事件
 })

$.ajax({
  type: "get",
  url: "./test.php",
  data: {
   id:000,
   name:'发送$.ajax请求的演示'
  },
  dataType: "json",
  success: function (response) {
   console.log(response);
  }
  });

$(window).ajaxStart(function () {
 console.log('有一个请求开始了')
})

$(window).ajaxSend(function () {
 console.log('有一个要发送出去了')
})

$(window).ajaxSuccess(function () {
 console.log('有一个请求成功了')
})

$(window).ajaxError(function () {
 console.log('有一个请求失败了')
})

$(window).ajaxComplete(function () {
 console.log('有一个请求完成了')
})

$(window).ajaxStop(function () {
 console.log('有一个请求结束了')
})