Ajax入门

第一章：原生AJAX

1.1、AJAX简介

AJAX全称为 Asynchronous JavaScript and XML ，就是异步的js和xml，通过这个技术可以在浏览器中向服务器发起异步请求，最大的优势就是无刷新获取数据，它不是一门新语言，而是一种将现有标准组合在一起使用的方式

1.2、XML简介

它是一种可扩展标记语言，它经常被用来传输和存储数据

有些同学一直会和html搞混，HTML:超文本标记语言，HTML中都是预定义标签，但XML中没有预定义标签，它都是自定义标签，用来表示一些数据

注意：以前和服务器之间的数据传输就是用xml的格式，但是现在已经被json取代了，json格式更加简介，数据转换方面也更方便，灵活度方面比xml要好的多

1.3、AJAX特点

1.3.1 优点

• 可以无需刷新页面与服务器进行通信
• 允许你根据用户事件来更新部分页面内容

1.3.2 缺点

• 没有浏览历史，不能回退
• 存在跨域问题
• SEO不友好（就是请求返回的数据在源代码中搜索不到）

1.4、AJAX请求基本操作

 const xhr = new XMLHttpRequest()     //创建对象
    xhr.open('GET','http://127.0.0.1:8000/serve');   //初始化，设置请求方法和url
    xhr.send();     //发送请求
    xhr.onreadystatechange=function(){     //当readystate状态发生改变时的回调
      if(xhr.readyState===4){        //服务端数据全部返回
        if(xhr.status>=200 && xhr.status<300){     //请求状态是成功的
          //处理相应数据
        }
      }
    }

补充：readystate的几种状态值，总共有0，1，2，3，4五种，0是初始状态值，1是执行完open（），2是执行完send（），3是部分数据返回，4是所有数据都已返回

1.5、设置请求参数

1. GET请求

直接在open方法的url参数后面拼接参数，用？开头，&连接多个参数

xhr.open('GET','http://127.0.0.1:8000/serve?name="haha"'&age=12&like="篮球"); 

2. POST请求

直接在send（）方法中添加要传递的参数，这里的格式要求必须和服务端的接收处理方式保持一致

xhr.send("a=12&b=44z&c=123")     //字符串形式
xhr.send({a:12,b:44,c:123})      //json形式

1.6、设置请求头

直接在open（）方法后面写代码，可以设置多个

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

1.7、json数据返回处理

这里要讲的是，服务端返回json数据，前端有两种处理方式，一种是自己手动转换，第二种是设置属性，让其自动转换

//手动转换

if(xhr.readystate===4){
	if(xhr.status>=200 && xhr.status<300){
		//通过json.parse将json字符串转成json对象格式
		const obj = JSON.parse(xhr.response)
	}
}

//设置属性自动转换

xhr.responseType="json"
--------此处代码省略--------
if(xhr.readystate===4){
	if(xhr.status>=200 && xhr.status<300){
		const obj = xhr.response    //response返回的就已经是json对象形式了
	}
}

1.8、ajax在IE中的缓存问题

IE浏览器在处理ajax请求时，它会将第一次请求成功的结果缓存起来，第二次再次请求相同地址时，它就会用缓存，导致数据不是最新的，这在实际场景中就会有问题，chrome浏览器是没有这个问题的，所以我们要怎么做呢？

xhr.open('GET','http://localhost:127.0.0.1:8000?t='+Data.now()) 
就是在url地址后面加一个时间参数，这样每次请求的url地址都不一样，浏览器也就不会用老的缓存数据了

1.9、ajax请求超时和网络异常处理

//直接给xhr对象设置timeout属性以及绑定超时和网络异常的回调

xhr.timeout=2000   //这里默认单位是毫秒
xhr.ontimeout=()=>{
	//这里的超时处理自定义
	console.log("请求已超时，请重试")
}
xhr.onerror=()=>{
	//这里的网络错误处理自定义
	console.log("您的网络貌似有点问题，请检查")
}

1.10、取消手动ajax请求

直接调用xhr对象的abort()方法 ....

第二章：Jquery中发送ajax请求

// 第一步引入jquery cdn链接或者也可通过npm 下载对应包文件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

**//发送get请求**

$.get("http://localhost:127.0.0.1:8000/jquery",{a:12,b:33} ,function(data){
	console.log(data)  //接口回调，data就是返回结果
} ,"json")


**//发送post请求**

$.post("http://localhost:127.0.0.1:8000/jquery",{a:12,b:33} ,function(data){
	console.log(data)  //接口回调，data就是返回结果
} ,"json")

**//jquery通用请求方法($.ajax)**

$.ajax({
	url:'http://localhost:127.0.0.1:8000/jquery"',
	data:{a:12,b:33},
	type:'GET',
	dataType:'json',
	success:(data)=>{...}      //成功回调
	error:(err)=>{...}         //失败回调
	timeout:2000               //可设置超时时间
	headers:{                  //设置头信息
		a:1,
		b:2
	}
})

说明：这个$.get/$.post方法是简写方式可接受4个参数，第一个请求地址，第二个是传递参数，第三十是请求回调函数，第四个是响应体的数据类型，通用型调用方式接收一个请求对象，所有请求配置都是这个对象的属性，这里以常见的配置为例，具体还有很多可以配，可以参考官方文档api

第三章：Axios发送ajax

• 先引入axios cdn链接或者npm 下载对应包，这里以cdn链接方式为例

get请求：

Demo1：
axios.get('/user?ID=12345')    //直接接收一个参数url，方法返回的是promise
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  -------------------------------------------------------------
Demo2：
axios.get('/user', {     //直接接收2个参数，第一个是url，第二个是配置对象
    params: {            //在配置对象中配置url参数params和headers
      ID: 12345
    }，
    headers:{
    	aaa:111
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

post请求：

Demo1：
axios.post('/user?ID=12345',{   //第一个参数url，第二个参数请求体内容
		name:'xxx',
		password:123
	},{                //第三个参数是其他配置，在配置对象中配置url参数params和headers
		 params: {            
      	 	ID: 12345
    	}，
   		 headers:{
    		aaa:111
    	}
	})  
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

axios通用方式

axios({
	method:"post",   //请求方法
	url:'/axios',    //请求地址
	params:{         //url参数 
		id:123
	},
	headers:{        //头信息
		a:122,
		b:322
	},
	data:{           //请求体参数
		username:xxx,
		password:1231
	}
}) .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

第四章：fetch函数发送ajax

这个是全局对象的方法，可以直接调用，不需要下载包文件

fetch('http://127.0.0.1:8000/fetch',{
	method:'POST',
	headers:{
		name:111
	},
	body:'username=admin&password=123'        //这里的请求体的格式可以多样
}).then((res)=>{
	console.log(res)
}).catch((err)=>{
	console.log(err)
}})