【 Ajax 】基础用法

【Ajax】 基本用法

• 01、同步交互 && 异步交互

• 02、Ajax ？

• 03、创建 XMLHttpRequest

• 04、实现 Ajax 步骤

• 05、实现 Ajax 异步交互

• 06、Node.js 搭建基础服务

一、同步交互 && 异步交互

• 同步交互

       同步交互是指客户端向服务端发送请求，必须等待上一个请求结束，才能向服务端发送请求；

• 异步交互

       异步交互客户端向服务端发送请求，不需要等待上一个请求结束，才能向服务端发送请求；

  • 异步交互的优势：

    • 用户操作无须有等待同步交互的结果；
    • 异步交互只需要与服务端交换必要的数据内容，而不是将所有的数据全部更新；
    • 异步交互对带宽造成的压力更小；
    • 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 的异步交互