【Ajax】 基本用法
一、同步交互 && 异步交互
-
同步交互
同步交互是指客户端向服务端发送请求,必须等待上一个请求结束,才能向服务端发送请求;
-
异步交互
异步交互客户端向服务端发送请求,不需要等待上一个请求结束,才能向服务端发送请求;
-
异步交互的优势:
- 用户操作无须有等待同步交互的结果;
- 异步交互只需要与服务端交换必要的数据内容,而不是将所有的数据全部更新;
- 异步交互对带宽造成的压力更小;
- Ajax 实现异步交互不需要第三方插件,浏览器支持 JavaScript 语言即可;
-
二、Ajax ?
Ajax :Asynchronous【异步】 JavaScript XML ,异步JavaScript和XML,他表示的是多个技术的集合,不需要页面整体更新而实现数据的局部更新。多用于实现异步交互(如:页面局部更新,视频播放评论栏自动更新等众多功能)
- A :Asynchronous
- ja :JavaScript
- x :XML
Ajax 涉及的技术:
-
HTML 页面
-
Cascading Style Sheets:CSS
-
JavaScript
-
Document Object Model:DOM
-
XML:XMLHttpRequest 对象(实现Ajax异步交互的核心)
Ajax 核心对象 XMLHttpRequest:
-
URL:获取数据,且不会刷新整个页面;
-
XMLHttpRequest 已经被W3C组织标准化;(不需要考虑浏览器兼容)
-
XMLHttpRequest 可以得到所有类型的数据
三、实现 Ajax 步骤
-
第一步:创建 Ajax 核心对象 XMLHttpRequest 对象;’
-
第二步:通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接;
-
第三步:通过 XMLHttpRequest 对象的 send() 方法向服务器请求数据;
-
第四步:通过 XMLHttpRequest 对象的 onreadystatechange 监听服务器;
-
第五步:接收并处理服务器反馈数据;
-
第六步:将结果更新到 HTML 页面;
四、实现 Ajax 异步交互
1. 创建 XMLHTTPRequest 对象;
var xhr = createXMLHttpRequest();
2. 调用 open()
方法与服务器建立连接;
var xhr = createXMLHttpRequest();
// open( Method(方法名), url(目标URL) , async(是否异步) ,user(用户名认证) ,password(密码认证)
xhr.open('get','http://localhost:8848/code/index.html')
3. 调用 send()
方法,发送数据至服务端;
var xhr = createXMLHttpRequest();
// open( Method(方法名), url(目标URL) , async(是否异步) ,user(用户名认证) ,password(密码认证)
xhr.open('get','http://localhost:8848/code/index.html')
// 当使用 get 方法时,只能传 null ;
xhr.send(null)
4. 调用 onreadystatechange 事件 , 监听服务器;
// 1.创建 XML 对象
var xhr = createXMLHttpRequest();
// 2.open( Method(方法名), url(目标URL) , async(是否异步) ,user(用户名认证) ,password(密码认证)
xhr.open('get','http://localhost:8848/code/index.html')
// 3.当使用 get 方法时,只能传 null ;
xhr.send(null)
// 4.监听服务器通信状态
xhr.onreadystatechange = function(){
// readyState 服务端通信状态
// 0 - 未初始化
// 1 - open() 方法被调用
// 2 - send() 方法被调用
// 3 - 正在响应
// 4 - 响应完毕
// 接收结果
if ( xhr.readyState === 4 ){
// 输出结果
var responseText = xhr.responseText;
console.log(responseText);
}
};
5. 将接收数据更新至 HTML 页面;
// 没有数据暂不更新;
五、Node.js 搭建基础服务
// 引入 http 模块
const http = require("http");
// 创建服务,并监听一个端口号
const server = http.createServer((req,res)=>{
res.stausCode = 200;
res.setHeader('Content-Type','text/plain');
res.end('success');
}).listen('8848','127.0.0.1',()=>{
console.log("Server is Running at http://127.0.0.1:8848");
})
总结
今日内容回顾:
-
1.同步 && 异步 概念
-
2.Ajax 的概念
-
3.如何实现 Ajax 的异步交互