Ajax系列
Ajax
同步交互与异步交互
-
所谓同步交互就是指客户端向服器端发送请求后,必须等待结果返回才能进行下一次请求html
- 举例: 好比A跟B说给我一杯水，B去倒水,A等着B去倒水，B倒完水回来给A，A喝完水以后，A继续作其余事情!
- 所谓异步交互就是不须要等待结果返回就能够直接向服务器端发送下一次请求
-举例: 好比A跟B说给我一杯水，B去倒水，A去作其余事情，B倒完水，跟A说水来了，A放下其余事情喝水，A喝完水继续作其余事情 - 总结: 同步就是要一个事情一个事情的作,而异步就是同时作多个事情
分析图:
缓存
实现Ajax异步交互的步骤
- 建立XMLHTTPRequest对象
- 调用XMLHTTPRequest对象的open()方法
- 调用XMLHttpRequest对象的send()方法
- 利用XMLHTTPRequest对象的onreadystatechange事件
- 将接收到的结果更新到HTML页面
示例代码:服务器
<body>
<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 经过ID属性获取节点
var btn = document.getElementById('btn');
// 为获取的ID属性绑定点击事件
btn.addEventListener('click',function () {
// 实现Ajax的异步交互
// 1.建立XMLHTTPRequest对象
var xhr = createXMLHttpRequest();
/*
2.调用XMLHTTPRequest对象的open()方法
* 做用 - 与服务器端创建链接
open(method,url)方法
* method - 表示当前的请求方式
* 常见的请求方式为GET和POST
* url - 表示当前请求的服务器端地址连接
*/
xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');
/*
3.调用XMLHttpRequest对象的send()方法
* 做用 - 将客户端页面的数据发送给服务器端
send()方法
* 若是不传递任何数据内容时 - 向该方法传递null
*/
xhr.send(null);
/*
4.利用XMLHTTPRequest对象的onreadystatechange事件
* 做用 - 用于监听服务器端的通讯状态
* 服务器端的通讯状态中 - 存在着处理完毕(信号)
* 接收服务器端返回的处理结果
*/
xhr.onreadystatechange = function () {// 监听服务器端的通讯状态
/*
XMLHttpRequest对象的readyState属性
* 做用 - 表示服务器端的通讯状态
* 值:
* 0 - 表示未初始化
* 1 - 表示open()方法被调用
* 2 - 表示send()方法被调用
* 3 - 表示正在响应
* 4 - 表示响应已完毕
*/
if (xhr.readyState === 4) {
/*
接收服务器端返回的处理结果
XMLHttpRequest对象的responseText属性
* 做用 - 用于接收服务器端的响应结果
*/
console.log(xhr.responseText);
}
}
/*
5.将接收到的结果更新到HTML页面
*/
});
</script>
</body>
readyState属性
-
XMLHttpRequest对象的readyState属性app
- 做用 - 表示服务器端的通讯状态
-
值:异步
- 0 - 未初始化
- 1 - open()方法被调用
- 2 - send()方法被调用
- 3 - 正在响应
- 4 - 响应已完毕
示例代码:post
<body>
<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 经过ID属性获取指定元素
var btn = document.getElementById('btn');
// 为获取的属性绑定点击事件
btn.addEventListener('click',function () {
// 1.建立XMLHttpRequest对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {// 监听服务器端的通讯状态
/*
XMLHttpRequest对象的readyState属性
* 做用 - 表示服务器端的通讯状态
* 值
* 0 - 未初始化
* 1 - open()方法被调用
* 2 - send()方法被调用
* 3 - 正在响应
* 4 - 响应已完毕
*/
// console.log(xhr.readyState);
if (xhr.readyState === 4) {
/*
保证当前的异步请求必定是正确的
* XMLHttpRequest对象的status属性
* 做用 - 获得当前请求以后的响应状态码
* 200 - 表示请求成功
* 304 - 表示请求的资源未变化(转向获取本地缓存)
* 404 - 表示服务器端地址未找到
*/
console.log(xhr.status);
if (xhr.status === 200) {
/*
接收服务器端响应的结果
* responseText属性 - 专门接收字符串类型的结果内容
* responseXML属性 - 专门接收XML数据格式的结果内容
*/
console.log(xhr.responseText);
}
}
/*if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}*/
};
xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');
xhr.send(null);
});
</script>
</body>
send()方法
-
send(data)方法测试
- 参数data - 表示向服务器端发送的请求数据
-
请求方式url
- 若是当前的请求方式为GET的话 - send()方法中只能传递null值
- 将请求数据添加到请求地址连接中
-
两种状况:spa
-
请求数据的格式code
- 若是具备多个请求数据的话，之间使用"&"进行分隔
- 每一个数据格式 -> name=value
-
示例代码:
<body>
<!--
提交表单时,向服务器端发送数据
* 请求数据被添加请求连接地址中
* 请求数据的格式
1. 若是具备多个请求数据的话,之间使用"&"进行分隔
2. 每一个数据格式 - name=value
-->
<form action="#" method="get">
<input type="text" id="user" name="user">
<input type="text" id="pwd" name="pwd">
<input type="submit">
</form>
<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 经过ID属性获取到指定元素
var btn = document.getElementById('btn');
// 为获取到的元素绑定点击事件
btn.addEventListener('click',function () {
// 1.建立XMLHttpRequest对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){// 监听服务器端的通讯状态
if (xhr.readyState === 4) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');
/*
向服务器端发送请求数据
send(data)方法
* 参数data - 表示向服务器端发送的请求数据
* 请求方式
* 若是当前的请求方式为GET的话 - send()方法中只能传递null值
* 将请求数据添加到请求地址连接中
* 两种状况:
* 请求数据的格式
1.若是具备多个请求数据的话，之间使用"&"进行分隔
2.每一个数据格式 -> name=value
*
*/
// 人为方式获取当前的数据，构建成指定的数据格式
xhr.send(null);
});
</script>
</body>
请求方式
- 若是是GET，send()方法只能传递null值 -> 请求数据添加在请求地址中
- 若是是POST，send()方法传递请求数据
示例代码:
<body>
<!--
表单提交时 - MIME类型的默认值
application/x-www-form-urlencoded
-->
<form action="#" enctype="application/x-www-form-urlencoded">
<input type="text" id="user" name="user">
<input type="text" id="pwd" name="pwd">
<input type="submit">
</form>
<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
// 经过ID属性获取到指定元素
var btn = document.getElementById('btn');
// 为获取到的元素绑定点击事件
btn.addEventListener('click',function(){
// 1.建立XMLHttpRequest对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){// 监听服务器端的通讯状态
if (xhr.readyState === 4) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
xhr.open('post','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');
// 设置请求头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/*
send()方法
* 若是是GET，send()方法只能传递null值 -> 请求数据添加在请求地址中
* 若是是POST，send()方法传递请求数据
*/
xhr.send('user=zhangwuji&pwd=123456');
});
</script>
</body>
相关文章
- 1. jQuery系列：Ajax
- 2. [Ajax系列]Ajax介绍
- 3. web系列之Ajax
- 4. react学习系列之ajax
- 5. django 笔记15 ajax系列
- 6. AJAX系列之一——概述
- 7. HTTP系列 -- AJAX 基础
- 8. Ajax - ASP.NET MVC 4 系列
- 9. HTTP系列 -- AJAX 进阶
- 10. ASP.NET AJAX入门系列
- 更多相关文章...
- • AJAX 简介 - PHP教程
- • PHP - AJAX 与 PHP - PHP教程
- • PHP Ajax 跨域问题最佳解决方案
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. jQuery系列：Ajax
- 2. [Ajax系列]Ajax介绍
- 3. web系列之Ajax
- 4. react学习系列之ajax
- 5. django 笔记15 ajax系列
- 6. AJAX系列之一——概述
- 7. HTTP系列 -- AJAX 基础
- 8. Ajax - ASP.NET MVC 4 系列
- 9. HTTP系列 -- AJAX 进阶
- 10. ASP.NET AJAX入门系列