原生ajax
//1.创建对象优化
var xhr = new XMLHttpRequest();
//2.给对象添加属性和方法
xhr.onreadystatechange = function(){
console.log(xhr.readyState); //请求状态码 http 1-4
if(xhr.readyState == 4){
console.log(xhr.status);
if(xhr.status == 200){
console.log(xhr.responseText);// 返回响应的内容
}else{
alert("响应失败");
}
}
}
//3.open方法设请求方式和地址
xhr.open("get","1.txt")
//4.发送请求
xhr.send();
02传递get请求函数
<p> <input type="text" id="username"> </p>
<p> <input type="text" id="age"> </p>
<p> <input type="button" value="提交" id="btn"> </p>
<script type="text/javascript">
//获取按钮元素
var btn = document.getElementById('btn');
//获取姓名按钮文本框
var username = document.getElementById('username');
//获取年龄文本框
var age = document.getElementById('age');
//为按钮添加点击事件
btn.onclick = function() {
//创建ajax对象
var xhr = new XMLHttpRequest();
//获取用户在文本框中输入值
var nameValue = username.value;
var ageValue = age.value;
//拼接请求参数
// 此处不要打空格
var params = `username=${
nameValue}&age=${
ageValue}`;
// 2.告诉Ajax对象要向哪发送请求,以什么方式发送请求
// 1)请求方式 2)请求地址 注意get后的?要写,表示查询。(GET模式的窗体参数,以 “?”字符为起点,
//每个参数以“&”隔开,再以“=”分开参数名称与数据--URL)
xhr.open('get', 'http://localhost:3000/get?' + params);
// 发送请求
xhr.send();
// 获取服务器端响应的数据
xhr.onload = function() {
console.log(xhr.responseText)
}
}
</script>
03json数据
<script type="text/javascript">
//获取按钮元素
var btn = document.getElementById('btn');
//获取姓名按钮文本框
var username = document.getElementById('username');
//获取年龄文本框
var age = document.getElementById('age');
//为按钮添加点击事件
btn.onclick = fun