在JavaScript中，XMLHttpRequest是客户端的API，它为浏览器与服务器通信提供了便捷的通道。 XMLHttpRequest API 受 IE 7+、Firefox、Chrome、Safari 和 Opera 等现代浏览器支持。
发送请求
发送请求的方式：
open(method, url, async);参数解释：
还有另一种方式：（仅适用于POST请求）
send(string);发出 POST 请求时请注意：
如果我们想使用类似于form表单提交数据的POST请求，我们需要在代码中使用XMLHttpRequest对象的setRequestHeader()方法来添加HTTP头。 然后在send()方法中添加要发送的数据：
xmlhttp.open('POST', 'ajax_test.php', true);xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');xmlhttp.send('name=smyhvae&age=27');
onreadystatechange 事件
注册onreadystatechange事件后，每当readyState属性发生变化时，都会调用onreadystatechange函数。
ReadyState：（存储 XMLHttpRequest 的状态。从 0 更改为 4）
地位：
在onreadystatechange事件中，当readyState等于4且状态码为200时typescript 网络请求typescript 网络请求，表示响应已准备好。
服务器响应的内容
如果响应是普通字符串，则使用responseText； 如果响应是 XML，则使用responseXML。
三
常用的Ajax请求形式
手写第一个 Ajax 请求
获取请求：
//【发送ajax请求需要五步】//（1）创建XMLHttpRequest对象var xmlhttp = new XMLHttpRequest();//（2）设置请求的参数。包括：请求的方法、请求的url。xmlhttp.open('get', '02-ajax.php');//（3）发送请求xmlhttp.send();//（4）注册事件。onreadystatechange事件，状态改变时就会调用。//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。xmlhttp.onreadystatechange = function () {// 为了保证 数据 完整返回，我们一般会判断 两个值if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//（5）服务端相应：如果能够进入这个判断，说明数据请求成功了console.log('数据返回成功：' + JSON.stringify(xmlhttp.responseText));// 伪代码：按业务需要，将接口返回的内容显示在页面上// document.querySelector('h1').innerHTML = xmlhttp.responseText;}};
帖子请求：
//（1）异步对象var xmlhttp = new XMLHttpRequest();//（2）设置请求参数。包括：请求的方法、请求的url。xmlhttp.open('post', '02.post.php');// 如果想要使用post提交数据,必须添加此行xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');//（3）发送请求xmlhttp.send('name=fox&age=18');//（4）注册事件xmlhttp.onreadystatechange = function () {//（5）服务端相应if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {alert(xmlhttp.responseText);}};
封装Ajax请求（重要）
上面代码的执行顺序很容易理解，但是在实际开发中，不会这样写。 如果你的页面需要调整socket十次，那Ajax请求岂不是要手写十次？ 这可能会导致大量重复代码。
因此，我们需要将重复的代码封装成一个公共函数，然后通过回调函数处理成功和失败的逻辑。
封装Ajax请求的代码如下：（以get请求为例）
// 封装 Ajax为公共函数：传入回调函数 success 和 failfunction myAjax(url, success, fail) {// 1、创建XMLHttpRequest对象var xmlhttp;if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {// 兼容IE5、IE6浏览器。不写也没关系xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');}// 2、发送请求xmlhttp.open('GET', url, true);xmlhttp.send();// 3、服务端响应xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {var obj = JSON.parse(xmlhttp.responseText);console.log('数据返回成功：' + obj);success && success(xmlhttp.responseText);} else {// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。fail && fail(new Error('接口请求失败'));}};}// 单次调用 ajaxmyAjax('a.json', (res) => {console.log(res);});// 多次调用 ajax。接口请求顺序：a --> b --> cmyAjax('a.json', (res) => {console.log(res);myAjax('b.json', (res) => {console.log(res);myAjax('c.json', (res) => {console.log(res);});});});
学会了封装get请求之后，封装post请求也是类似的写法。
下面列出了两种更常见的诉状形式：
Jquery-Ajax请求
// get请求$('button').eq(0).click(()=>{// 方法中有三个参数，给谁发,发什么参数（对象），回调$.get('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{console.log(data);})});// post请求$('button').eq(1).click(()=>{// 方法中有四个参数，给谁发 ,发什么参数（对象），回调 ,响应体数据类型$.post('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{console.log(data);})});// ajax方式$('button').eq(2).click(()=>{// 参数是一个对象$.ajax({//urlurl:'http://127.0.0.1:8001/jquery-server',// 携带参数data:{a:100, b:200},// 响应体结果类型设置// dataType:'json',// 请求类型type:'GET',// 成功的回调函数success:function(data){console.log(data)},// 超时时间// timeout:2000,// 头信息设置// headers:{},// 失败的回调// error:function(){}})})
Axios - 阿贾克斯恳求
// 配置baseURL// axios.defaults.baseURL = 'http://127.0.0.1:8001'// 有此配置项后，请求地址可省略一部分const btn = document.querySelectorAll('button');btn[0].addEventListener('click', ()=>{//GET请求axios.get('http://127.0.0.1:8001/axios-server',{// 请求参数params:{a:700,b:400},// 请求头信息// headers:{// name:'张三',// age:20// },// 回调函数}).then(value =>{console.log(value)});});btn[1].addEventListener('click',()=>{axios.post('http://127.0.0.1:8001/axios-server',{// 携带参数username:'admin',passward:'admin',})})btn[2].addEventListener('click', ()=>{axios({// 请求方法method:'POST',//urlurl:'http://127.0.0.1:8001/axios-server',// 参数params:{a:10,b:100,},// 请求头Headers:{c:100,d:200},// 请求体参数// data: {// username:'admin',// passward:'admin',// },})})
以上是一些比较常用的请求方式，希望对大家理解Ajax网络请求有所帮助。 不管是哪种形式的请求，你还是要根据自己的环境来决定如何使用。 介绍的只是方法，具体逻辑要看业务需求。
这就是今天的全部内容。 更多Java基础知识正在不断更新。 记得关注【云源IT】，一起学习Java！
上次见！
结尾
文案编辑|云高级
带图片文案| 云前辈
发表评论