AJAX
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX不是新的编程语言，是一种使用现有标准的新方法。
- AJAX最大的有点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
- AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- AJAX是一种用于创建快速动态网页的技术。
- 通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。
- 传统的网页(不使用AJAX)如果需要更新内容，必须重新加载整个网页。使用AJAX可以进行网页内容的局部更新。
- 案例：朋友圈，评论，电商商品列表，图库...
- 表单用来收集用户信息
- 将用户信息提交给服务器
- action:提交内容(服务器)的地址
method:提交方式
- get 安全性低(请求的内容拼接在URL中) 大小有限制
- post 安全性高
同步异步
- 同步：单线程 前面的代码执行结束后，才会执行下一步代码 阻塞
不意味着所有的步骤同时进行，而是指步骤在一个控制流程序列中按顺序执行。 - 异步：多个代码同时执行
执行的过程将不再与原有的序列顺序有关系。
同步按照代码顺序执行，异步不按照代码顺序执行，效率更高。
接口文档
登录
<form action="http://146.56.207.108:3000/Handler/UserHandler?action=login" method="post">
账号：<input type="text" name="userName"><br>
密码：<input type="password" name="password"><br>
<button>提交</button>
</form>
<form action="https://query.asilu.com/weather/baidu/" method="get">
输入城市名称：<input type="text" name="city"><br>
<button>查询天气</button>
</form>
<br>
<form action="http://146.56.207.108:3000/Handler/citylists" method="get">
<button>获取城市列表</button>
</form>
<br>
<form action="http://146.56.207.108:3000/Handler/citys" method="get">
请输入要查询的城市:<input type="text" name="name"><br>
<button>查询</button>
</form>
ajax的封装
一.封装：
1.相同部分 不做处理
2.不同的部分 以参数的形式表示
二. 不同的部分
1.请求地址 url
2.请求方式 method
3.是否异步 async
4.发送的数据 参数 data
5.成功后执行的函数 success
6.失败后执行的函数 fail
function ajax(url, method, async, data, success, fail) {
// 01.创建异步请求对象 XMLHttpRequest
var xhr;
// 考虑到浏览器的兼容
if (window.XMLHttpRequest) {
// 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
xhr = new XMLHttpRequest();
} else {
// IE5 IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求行 open(method,url,async)
// method:请求方式 get post
// url:请求地址
// async:是否异步 true 默认为异步
if (method.toLowerCase() === "get") {
xhr.open("get", url + "?" + data, async);
// get:数据在URL后面用?拼接 不传参数
xhr.send();
} else if (method.toLowerCase() === "post") {
xhr.open("post", url, async);
// post:会有参数 要发送的数据(以字符串的形式)写在send()中
// 设置请求头 setRequestHeader()
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
} else {
console.error("错误", "请求方式错误")
}
// xhr.readyState 存有XMLHttpRequest的状态 从0到4
// 0:请求未初始化
// 1:服务器连接已建立
// 2:请求已接收
// 3:请求处理中
// 4:请求已完成,且响应已就绪
// xhr.status 状态码
// onreadystatechange 当状态发生变化时触发
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var res = JSON.parse(xhr.response); //将获取到的数据转换为对象
success(res)
} else {
fail(xhr.status, xhr.statusText)
}
}
}
}
ajax("http://146.56.207.108:3000/Handler/citylists", "get", true, "", function (res) {
console.log(res)
}, function (status, statusText) {
console.log(status, statusText);
})
ajax("http://146.56.207.108:3000/Handler/UserHandler?action=login", "post", true, "userName=老韩&password=123456",
function (res) {
console.log(res)
},
function (status, statusText) {
console.log(status, statusText);
})
var oBtn = document.getElementById("btn");
var oList = document.getElementById("list");
oBtn.onclick = function () {
// 01.创建异步请求对象 XMLHttpRequest
var xhr;
// 考虑到浏览器的兼容
if (window.XMLHttpRequest) {
// 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
xhr = new XMLHttpRequest();
} else {
// IE5 IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xhr.readyState);
// 2.设置请求行 open(method,url,async)
// method:请求方式 get post
// url:请求地址
// async:是否异步 true 默认为异步
xhr.open("get", "http://146.56.207.108:3000/Handler/citylists", true);
// xhr.open("post", "http://146.56.207.108:3000/Handler/UserHandler?action=login", true);
// console.log(xhr.readyState);
// 3.发送请求 send(字符串)
// get:数据在URL后面用?拼接 不传参数
xhr.send();
// post:会有参数 要发送的数据(以字符串的形式)写在send()中
// 设置请求头 setRequestHeader()
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xhr.send("userName=韩大队&password=123456");
console.log(xhr.readyState);
// xhr.readyState 存有XMLHttpRequest的状态 从0到4
// 0:请求未初始化
// 1:服务器连接已建立
// 2:请求已接收
// 3:请求处理中
// 4:请求已完成,且响应已就绪
// xhr.status 状态码
// onreadystatechange 当状态发生变化时触发
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var res = JSON.parse(xhr.response)
// console.log(res);
if (res.msg == "success") {
// console.log(res.data);
for (var i = 0; i < res.data.length; i++) {
console.log(res.data[i].title)
var str = `<li>
${res.data[i].title}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>`
oList.innerHTML += str
}
} else {
console.log(res.msg)
}
}
// console.log(xhr.readyState);
// console.log(xhr.status);
// console.log(JSON.parse(xhr.response));
// document.getElementById("header").innerHTML=JSON.parse(xhr.response).data[0].lists
}
}
// JSON.parse() 将字符串类型的对象转换为对象
// JSON.stringify() 将对象转换为字符串格式
var oBtn = document.getElementById("btn");
var oCity = document.getElementById("city");
var oList = document.getElementById("list");
oBtn.onclick = function () {
// 01.创建异步请求对象 XMLHttpRequest
var xhr;
// 考虑到浏览器的兼容
if (window.XMLHttpRequest) {
// 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
xhr = new XMLHttpRequest();
} else {
// IE5 IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xhr.readyState);
// 2.设置请求行 open(method,url,async)
// method:请求方式 get post
// url:请求地址
// async:是否异步 true 默认为异步
xhr.open("get", "http://146.56.207.108:3000/Handler/citys?name="+oCity.value, true);
// 3.发送请求 send(字符串)
// get:数据在URL后面用?拼接 不传参数
xhr.send();
// xhr.readyState 存有XMLHttpRequest的状态 从0到4
// 0:请求未初始化
// 1:服务器连接已建立
// 2:请求已接收
// 3:请求处理中
// 4:请求已完成,且响应已就绪
// xhr.status 状态码
// onreadystatechange 当状态发生变化时触发
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var res = JSON.parse(xhr.response)
// console.log(res);
if (res.msg == "success") {
// console.log(res.data);
for (var i = 0; i < res.data.length; i++) {
console.log(res.data[i])
var str = `<li>
${res.data[i].name}
</li>`
oList.innerHTML += str
}
} else {
console.log(res.msg)
}
}
// console.log(xhr.readyState);
// console.log(xhr.status);
// console.log(JSON.parse(xhr.response));
// document.getElementById("header").innerHTML=JSON.parse(xhr.response).data[0].lists
}
}
ajax结合form表单进行post请求
// 获取元素
var oUser = document.getElementById("user");
var oPsw = document.getElementById("psw");
var oLogin = document.getElementById("login");
// 点击登录按钮
oLogin.onclick = function () {
// 01.创建异步请求对象 XMLHttpRequest
var xhr;
// 考虑到浏览器的兼容
if (window.XMLHttpRequest) {
// 所有现代浏览器（IE7+,FireFox,Chrome,Safari,Opera）
xhr = new XMLHttpRequest();
} else {
// IE5 IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xhr.readyState);
// 2.设置请求行 open(method,url,async)
// method:请求方式 get post
// url:请求地址
// async:是否异步 true 默认为异步
xhr.open("post", "http://146.56.207.108:3000/Handler/UserHandler?action=login", true);
// console.log(xhr.readyState);
// post:会有参数 要发送的数据(以字符串的形式)写在send()中
// 设置请求头 setRequestHeader()
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("userName=" + oUser.value + "&password=" + oPsw.value);
console.log(xhr.readyState);
// xhr.readyState 存有XMLHttpRequest的状态 从0到4
// 0:请求未初始化
// 1:服务器连接已建立
// 2:请求已接收
// 3:请求处理中
// 4:请求已完成,且响应已就绪
// xhr.status 状态码
// onreadystatechange 当状态发生变化时触发
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.response));
}
// console.log(xhr.readyState);
// console.log(xhr.status);
// console.log(JSON.parse(xhr.response));
// document.getElementById("header").innerHTML=JSON.parse(xhr.response).data[0].lists
}
}
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
