ajax的基本概念及其使用(5步)
来源:互联网 发布:淘宝腔调入口 编辑:程序博客网 时间:2024/05/20 18:54
同步&异步
先上概念
同步:必须等待前面的
任务
完成,才能继续后面的任务异步:不受当前
任务
的影响举个例子:
同步:我们在银行排队时,只有等到你了,才能够去处理业务.
异步:我们在排队的时候,玩手机是没有任何影响的.
异步更新网站
当我们访问一个普通的网站时,当浏览器加载完:
HTML,CSS,JS
以后网站的内容就固定了.如果网站内容发生更改
必须刷新页面才能够看到更新的内容- 网站内容更新:
常规的网站内容更新,必须通过
刷新
显示新内容- 想像一下
你正用手机看着微博
手机网速很慢
内容看完了,点击
加载更多
按钮页面重新刷新
o(╯□╰)o
- 异步更新
实际情况是:我们在访问
新浪微博
时,当你看到一大半了,会自动
帮我们加载更多的微博,同时页面并没有刷新Ajax概念
当我们
正在排队
的时候,可以通过手机
去干一些其他的事情.在浏览器中,我们也能够不
刷新页面
,通过ajax
的方式去获取一些新的内容,类似网页有微博
,朋友圈
,邮箱
等- 单词解释:
Asynchronous Javascript And XML
(异步JavaScript和XML),他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest
XMLHttpRequest
ajax
使用的依旧是HTTP请求
,那么让我们来回忆一下一个完整的HTTP请求
需要什么>
请求的网址,方法
get/post
提交请求内容
数据
,请求主体
等接收响应回来的内容
五步使用法:
建立XMLHTTPRequest对象
注册回调函数
- 当服务器
回应
我们了,我们想要执行什么逻辑
- 当服务器
使用open方法设置和服务器端交互的基本信息
- 设置提交的
网址
,数据
,post
提交的一些额外内容
- 设置提交的
设置发送的数据,开始和服务器端交互
- 发送数据
更新界面
- 在注册的回调函数中,获取返回的数据,更新界面
示例代码:GET
get的数据,直接在请求的
url
中添加即可<script type="text/javascript"> // 创建XMLHttpRequest 对象 var xml = new XMLHttpRequest(); // 设置跟服务端交互的信息 xml.open('get','01.ajax.php?name=fox'); xml.send(null); // get请求这里写null即可 // 接收服务器反馈 xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { // 打印响应内容 alert(xml.responseText); } };</script>
- 示例代码:POST
<script type="text/javascript"> // 异步对象 var xhr = new XMLHttpRequest(); // 设置属性 xhr.open('post', '02.post.php' ); // 如果想要使用post提交数据,必须添加 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将数据通过send方法传递 xhr.send('name=fox&age=18'); // 发送并接受返回值 xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } };</script>
XMLHttpRequest_API讲解
1.创建
XMLHttpRequest
对象(兼容性写法)- 新版本浏览器:
var xml=new XMLHttpRequest();
- (IE5 和 IE6)
var xml=new ActiveXObject("Microsoft.XMLHTTP");
- 考虑兼容性创建Ajax对象
var request ; if(XMLHttpRequest){ // 新式浏览器写法 request = new XMLHttpRequest(); }else{ //IE5,IE6写法 new ActiveXObject("Microsoft.XMLHTTP"); }
2.发送请求:
方法 描述 open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
将请求发送到服务器。
- string:仅用于 POST 请求
3.POST请求注意点:
如果想要像
form
表单提交数据那样使用POST
请求,需要使用XMLHttpRequest
对象的setRequestHeader()
方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据:xmlhttp.open("POST","ajax_test.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");
4.onreadystatechange事件
当服务器给予我们反馈时,我们需要实现一些逻辑
属性 描述 onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
200: "OK"
404: 未找到页面
4.服务器响应内容
如果响应的是普通字符串,使用
responseText
,如果响应的是XML
,使用responseXML
属性 描述 responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。
- ajax的基本概念及其使用(5步)
- Ajax的五步使用
- CS中使用Ajax的步驟
- Ajax核心5步
- AJAX的基本概念
- Ajax的基本概念
- AJAX第四步:AJAX使用jquery一步到位。
- AJAX第五步:使用ajax解决页面首页显示后台数据的问题
- AJAX入门---五步使用XMLHttpRequest对象
- AJAX入门---五步使用XMLHttpRequest对象
- AJAX入门---五步使用XMLHttpRequest对象
- 多线程的基本概念及其简单应用
- 散列表的基本概念及其运算
- Java继承的基本概念及其限制 总结
- 离散数学及其应用--第一章-命题逻辑的基本概念
- Java继承的基本概念及其限制
- 散列表的基本概念及其运算
- Java继承的基本概念及其限制 总结
- TI_BLE软件开发者指导9-GAP
- 【日常SQL】存款统计表增加记录检查分劈比例问题
- Yii 利用query联表查询
- 获取scrollTop兼容各浏览器的方法,以及body和documentElement是啥?
- nodejs利用gridfs存文档到mongo中
- ajax的基本概念及其使用(5步)
- 性能测试中的测试模型设计(图)
- 使用postman进行带header的post请求
- 【BZOJ 3207】花神的嘲讽计划Ⅰ 主席树e
- android 读取excel POI JXL
- STM32中断数据回调函数接收处理
- 【总结】PHP常见面试题汇总(三)
- DRAMSim2学习3——模拟器架构()
- 使用C/C++预定义宏进行调试跟踪代码