1请求基本步骤（带参传入）
function getDate (parms){
//1.创建请求
let xhr = new XMLHttpRequest();
//2.连接服务器
xhr.open("GET","http://localhost:4000?name="+parms,true)
//3.监听返回值
xhr.onreadystatechange = function(){
if(this.readyState==4&&this.status == 200){
showDate(this.responseText)
}
}
//4.发送
xhr.send();
2.方法解析
new XMLHttpRequset(); 创建请求
open(method,url,async) 配置网络请求
method：方法 GET POST
url: 服务器地址
async: 是否异步 true false
xhr.send()发送
[使用post send带参](https://blog.csdn.net/weixin_40292626/article/details/78708160)
3.属性
readyState
status 状态码
[状态码](https://baike.sogou.com/v73030114.htm?fromTitle=%E7%8A%B6%E6%80%81%E7%A0%81)
4.事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
onreadystatechange事件 ： 每当 readyState 改变时，就会触发 onreadystatechange 事件。
5.get与post的不同
总结：一般使用get方式向服务器索取数据，使用post方式向服务器提交数据
//2.get请求和post的请求的不同：
http://www.test.com:9000
1）安全性：
post更安全
2）
get请求向后台传递数据，是在地址栏中传输的
例如：
http://www.test.com:9000?username=lucy&pwd=123242
post是在请求体中传输数据的
3)传递的数据大小
get请求传递的数据大小是有限制的
post 理论上是不限制大小
6.取出查询参数
let str="http://127.0.0.1:9000?username=jack&pwd=123&tel=211423423";
// let str="http://127.0.0.1:9000?username=jack";
//通过?将字符串分割
let s=str.split('?')[1];
let obj={}
if(s.indexOf('&')==-1){ //一个参数
let arr=s.split('=')
obj[arr[0]]=arr[1];
}else{//多个
let arr=s.split('&');
arr.forEach(item=>{
// console.log(item);
//分割字符串 key=value，填充到对象内部
let arr0=item.split('=');
obj[arr0[0]]=arr0[1];
});
}
7.例题根据相关书名查询书籍
<body>
<label for="">名字</label><input type="text"> <button>搜索</button>
<ul></ul>
<script src="./jquery.js"></script>
<script>
let oUl=document.querySelector('ul');
// let parm = document.querySelector('input')
document.querySelector('button').onclick = function(){
//清空oul子级
$('ul').empty()
let parm = document.querySelector('input').value
getDate(parm);
}
function getDate (parms){
//1.创建请求
let xhr = new XMLHttpRequest();
//2.连接服务器
xhr.open("GET","http://localhost:4000?name="+parms,true)
//3.监听返回值
xhr.onreadystatechange = function(){
if(this.readyState==4&&this.status == 200){
showDate(this.responseText)
}
}
//4.发送
xhr.send();
}
function showDate (cnt){
let {data:arr} = JSON.parse(cnt)
console.log(arr)
arr.forEach(item => {
let li = document.createElement('li')
li.innerText = item.name;
oUl.appendChild(li);
});
}
</script>
</body>
8.以前错过知识点 oninput事件
oninput与onchange
