★原生JS中的Ajax方法
日期：2020-8-21
看了一些博文以及自己的理解，我整理的一些东西只根据自己的适合情况来整理。
针对Ajax的整理，
1、首先得知道Ajax是什么
2、Ajax经常用在哪儿
3、跟Ajax有关的（同步+异步，get和post请求方式）的概念
4、Ajax的使用
一、Ajax是什么
Ajax是指异步的JavaScript和XML。
以异步的方式使得浏览器与服务器进行数据通信，用户一边在输入或浏览JavaScript编写的页面，后台在另一边悄悄地收发数据，由于数据类型有很多（简单类型+引用类型），所以采用一种通用的数据交换格式，即发过来的数据以XML的形式给浏览器，浏览器再翻译成它认识的JavaScript语言，使得后台发过来的数据在当前正在浏览的页面显示给用户，不用刷新加载以及其他事件操作才能看到，增强用户体验感。
由于XML格式以及解析啥的实在繁琐，已处于淘汰边缘，这时候Json上场了。
二、Ajax使用场景
1、注册账号时，表单即时发送后台对其内容或者格式等进行校验判断，然后将结果立即返回给用户；
2、下拉框联动，比如选择江苏省，市那边联动出来江苏省的13市； 3、百度，微博等搜索时补全功能
三、跟Ajax有关的概念
1、 同步+异步：
这边对于同步和异步的理解，我觉得最直观的理解就是，
异步：用户在与浏览器页面交互的时候，会悄悄发数据给后台，用户感受不到后台的执行操作，只需要管好当前自己的操作即可；
同步：用户自己跟浏览器打交道的时候，后台就在那儿等着，等用户喊他，喊完之后，才懒洋洋的来工作，他工作的时候，用户也只能等着，等后台来交差，这样听起来效率就好低。
针对这边，我存在的疑问：有必要用Ajax来执行同步操作吗，有可能是我理解不够深入，所以存在这个疑问，我后面再来研究一下我的这个疑惑。
解惑：Ajax默认异步， 可以点击这个查看设置同步的解释
2、get和post：（浏览器向服务器的请求方式）
（1）get和post：
向服务器提交数据的两种方式，主要区别在报文中的请求头，请求行，请求体中有所体现。
（2）get和post提交表单数据的区别:
get：1. 会把发送的数据放到地址栏中, 这样不安全, 会显示出敏感信息
2. 数据放到地址栏中, 地址栏中字符有长度限制
post：1. 不会把发送的数据放到地址栏中, post方式提交数据比get方式更安全些.
2. post方式来提交数据, 是没有大小限制
（3）鉴于两者的区别，大概区分了一下get和post使用的场景：
两者都可以向服务器发送请求，将浏览器数据发送给服务器，也可以接收服务器响应来的数据。
get：多用于想用来获取服务器的数据
post：多用于向服务器提交数据（可能是因为涉及到密码等安全性方面的信息）
（4）报文对比
get和post请求报文的对比： 请求报文: 行、 头、 体 1、 请求行: // get: 请求方式GET 发送的数据拼接到url地址后面，用 ? 隔开 // post: 请求方式POST 没有拼接发送的数据 2、 请求头: // 基本上头信息都是浏览器自动添加上的 // get 和 post 请求头不一样的地方 // post多个 content-type 请求头，不写的话得到的数据带有一串乱七八糟的字符 // content-type: application/x-www-form-urlencoded 3、 请求体: 放浏览器发送的数据 // get: get方式把数据拼接到url地址后面, 所以get请求体为空 // post: 有请求体, 放的发送的数据，没有？来连接
四、Ajax的使用（针对简单数据类型）
Ajax发送请求和获取响应的总结
（1）步骤：
1. 创建ajax对象 ==> var xhr = new XMLHttpRequest(); 2. ajax 发送的是http协议 (请求 + 响应) 3. 请求报文(行、 头、 体) // 请求行: xhr.open(方式, 地址) // 请求头: 不用处理 // 请求体: xhr.send(请求体数据) 4. 响应报文(行、 头、 体) // 响应行(状态行): 状态码 xhr.status ：200 ok /404 not Found /500 // 响应头: // xhr.getAllResponseHeaders() 获取所有的响应头 // xhr.getResponseHeader("xxxx") 获取指定的响应头d // 响应体: 响应的内容 xhr.responseText // xhr 状态变化 // 只需要关注4 ==> 响应结束, 需要给xhr注册readystatechange事件 // 状态 ==> xhr.readyState
（2）代码：
1) 请求:
//get方式：
var xhr = new XMLHttpRequest();
// 请求行
xhr.open("GET", "01.php?username=lw" );
// 请求体
xhr.send(null);
//post方式：
var xhr = new XMLHttpRequest();
// 请求行
// post方式, url后面没有发送的数据 , 数据在请求体中
xhr.open("POST", "./01.php");
// 请求头
// post方式比get方式多个content-type 请求头
// xhr.setRequestHeader() 设置请求头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 请求体
xhr.send("username=lw&age=10"); // 注意点: 不要带?
2) 响应： 获取响应内容的时机（ 应该是服务器响应结束后才来获取）
// 处理响应
// 需要给xhr注册readystatechange事件: 当xhr对象状态发生改变的时候触发
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
// ===4表示响应结束了
if(xhr.status === 200){
//状态码===200表示响应是成功的
// console.log( xhr.responseText );//接收打印返回来的数据
//对返回来的数据进行判断执行操作
if(xhr.responseText === "yes"){
// 注册过了
span.innerText = "该用户名已被注册";
}else{
// 可以注册
span.innerText = "√";
}
}else{
// 响应失败了
alert("网络繁忙, 请稍后再试!");
}
}
}
说明： xhr对象状态：在代码中, 通过xhr.readyState来查看到状态
// 0: ajax对象初始化了, 还未open
// 1: 已经open, 但还未发送请求, 还未send
// 2: 已经发送请求, 正在处理
// 3: 正在响应, 但还未结束
// 4: 响应结束了
响应还有第二种简单一点的写法，合并了第一行第二行代码，但是存在兼容问题，IE不识别。如下:
// onload注册：等同于 注册了readystatechange && readyState === 4
xhr.onload = function () {
// 响应结束了
if(xhr.status === 200){
//状态码===200表示响应是成功的
// console.log( xhr.responseText );//接收打印返回来的数据
//对返回来的数据进行判断执行操作
if(xhr.responseText === "yes"){
// 注册过了
span.innerText = "该用户名已被注册";
}else{
// 可以注册
span.innerText = "√";
}
}else{
// 响应失败了
alert("网络繁忙, 请稍后再试!");
}
}
五、Ajax的使用（针对复杂数据类型）
日期：2020-08-23
以上整理的情况都是后端响应的是简单数据类型，浏览器能够直接识别的，由于XML几乎淘汰，不整理，所以下面整理关于JSON数据格式交互的情况。
1、JSON 数据
// 1. JSON 数据本质上是个字符串
// 2. 字符串里面是键值对格式(数组或者对象)
// 3. 键名必须使用双引号包裹(不使用引号或者是单引号都不行的)
// 4. 多个键值对使用逗号隔开, 最后一个键值对不需要有逗号.
// var str = "{name: 'lw', age: 19}"; // 不符合
// var str = "{'name': 'lw', 'age': 19}"; // 不符合
// var str = '{"name": "lw", "age": 19}'; // 符合
// var str = "[10, 20, 30]"; // 符合 // 这么去理解 '{"0": 10, "1": 20, "2": 30}'
//注意：只是符合json字符串格式，浏览器并没有办法直接识别。
2、json字符串与js对象的相互转换
（1）把json字符串转成js对象：后端服务器响应给浏览器json字符串 ，浏览器自行解析成js对象
借助JSON对象
// JSON.parse(json字符串);
// parse 有解析的含义
<script>
// 这是后端响应给前端的数据 (json字符串格式)
var jsonStr = '{"name": "xm", "age": 19}';
var jsObj = JSON.parse(jsonStr);
console.log( jsObj );
</script>
（2）把js对象转成json字符串：前端浏览器给后端发送复杂数据类型时，将js对象转成json字符串发送
借助JSON对象
// JSON.stringify(js对象);
// stringify 字符串化
<script>
var obj = {
name: "lw",
age: 20,
hobby: [
"abc",
"def"
]
};
var jsonStr = JSON.stringify(obj);
console.log( jsonStr );
</script>
★jQuery中的Ajax方法
日期：2020-8-23
<script>
$(function () {
// jQuery中ajax方法 ==> $.ajax({}); // 参数是个对象, 在对象中配置
// 请求方式， 请求地址， 需要发送的数据 ...
// $("div").ajax(); // error
/*$.ajax({
// type; 请求方式( get post, 默认是get),
// url : 请求地址,
// success: function (data) {
// // 响应成功的时候执行的回调函数
// },
// error: function(){
// // 响应失败的时候执行的回调函数
// }
})*/
// 在发送ajax请求之前,来取做表单的校验
/*if (true) {
// if成立, 表单校验不通过了.
return;
// return 和 return false;区别
// return 没有返回值的, 主要就是借助return后面代码不执行
// return false 有返回值, 返回值是false
}*/
$.ajax({
type: "post",
url: "05.php",
data: {
name: "xm",
age: 19
// 需要发送的数据, data的值可以是个对象，也可以是字符串
// jQuery不会直接把data这个对象直接发送到服务器端, jQuery内部会根据请求方式去做不同的处理
},
// data: "name=xm&age=19",//字符串形式
// dataType: 预期服务器响应的数据类型（text json xml），这样浏览器就能根据预期判断是否需要进行解析
// dataType: "json", //如果后端php帮我们配置写了响应来的是json格式了的话，这边可不用配置
beforeSend: function () {
// 在发送ajax请求之前,执行的回调函数
// console.log("在发送ajax请求之前,执行的回调函数");
// 该回调函数的作用:
// 可以在该回调函数中进行表单校验的（在上面的if语句中进行校验也是一样的）, 如果校验不通过, 可以用return false来阻止ajax请求的方式
// 固定写法: return false;
// return false;
//这个回调函数里面进行表单校验不通过的话，必须是加上false，因为jQuery中规定了需要返回值，如果不在这儿进行校验，在上面的if语句校验时，不成立可返回return
},
success: function (info) {
// 形参data就是服务器响应发送来的数据
console.log("响应成功了", info); //响应来的数据具体是什么格式，建议打印一遍看一下
// console.log( JSON.parse( info ) ); //如果是json格式，还得格式转换一下进行使用
// 如果指定了dataType为json, 那么获取到info就是个js对象, 都不用自己手动进行 JSON.parse();
},
error: function () {
//error回调函数其实有形参，具体参数去“$.ajaxSetup() : 为所有的AJAX请求设置默认值”这篇文章找
console.log("失败了");
},
complete: function () {
// 响应完成了就会执行的回调函数
// 不论是响应成功还是失败都会执行的
// console.log( "complete 响应完成了" );
// 作用: 可以在该回调函数中, 将页面中的loading将其隐藏掉
}
})
})
})
</script>
4772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
