• • 第一 创建一个Ajax对象
  • 第二指定请求
    • open()的第2个参数是URL,它是请求的主题。这是相对于文档的URL,这个文档包含调用open()的脚本。如果指定绝对URL、协议、主机和端口通常必须匹配所在文档的对应内容:跨域的请求通常会报错。(但是当服务器明确允许跨域请求时，2级当服务器的响应是可缓存时。“POST” 方法常用于HTML表单。它在请求主体中包含额外数据(表单数据)且这些数据常存储到服务器.上的数据库中(副作用)。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。.
    • 如果有请求头的话，请求进程的下个步骤是设置它。例如，POST请求需要“Content-Type”头指定请求主题的MIME类型:
  • 最后一步 使用XMLHTTPRequest发起HTTP请求的最后一步是指定可选的请求主体并向服务器发送它。使用send()方法像如下这样做:

Ajax的基本使用

传统网站当中存在的问题！

• 网速慢的情况下，页面加载时间长，户只能等待

• 表单提交后，如果项内容不合格，需要重新填写所有表单内容

• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

Ajax

它是浏览器提供的一方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

Ajax的应用场景！

1. 页面上拉加载更多数据

2. 列表数据无刷新分页

3. 表单项离开焦点数据验证

4. 搜索框提示文字下拉洌表

Ajax的运行环境！

Ajax技术需要运行在网站环境中才能生效，会使用Node创建的服务器作为网站服务器。

当然你的第一步就是在你的工作目录中下载express框架！

index.html也是自己创建的！内容随便写！我写的就是：

还有，图中的app.js是自己创建的， 里面的内容就是下面的代码！

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');

// 创建web服务器
const app = express();

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 监听端口
app.listen(3003);
// 控制台提示输出
console.log('the backgroundServer is running ！ port is 3003')

完成以上的步骤之后就可以开启本地网站服务器了！

在你的命令行工具中输入node app.js(前提就是你要在你的当前的工作目录！简而言之就是要在你的app.js文件的那个目录！看下图!)

最终效果如下图所示:

如何使用Ajax技术向服务器发送请求！并实现在不刷新页面的情况下更新页面中的数据!【看不见我！看不见我！看不见我！看不见我！看不见我！看不见我！】

Ajax的实现步骤

1. 创建Ajax对象！

const xhr = new XMLHTTPRequest();

2. 告诉Ajax请求方式以及请求地址

xhr.open('get', 'http://www.baidu.com');

3. 发送请求

xhr.send();

4. 获取服务端给予客户端的响应数据

	xhr.onload = function() {
			console.log(xhr.responseText);
		}

实战演练：实现自己的服务器端向客户端【浏览器】响应消息！

我是以上面创建好的服务器为例！

1. 新建一个文件夹！随便取名！这里我就恬不知耻的用lvhang这个文件夹了哈!
   

2. 当然如你所见， 这个文件夹下面还有一个html文件，你也要剑豪偶！

3. 第三步就是你要在app.js文件中拼接你刚刚创建好的文件夹， 我的当然就是lvhang这个文件夹啦！
   
   

4. 第四步当然就是正儿八经的coding啦！在lvhang文件下的html文件中！写如下的代码！其实就是Ajax的实现步骤喽！

5. 在app.js中书写路由：重点是：服务端的请求方式和请求地址一定要和客户端对应起来! 也就是我们请求的方式是get， 那么书写路由时的方式也是get

// 第一个参数是地址， 第二个参数是请求处理函数！
app.get('/basicUseOfAjaxTest', (req, res) => {
	res.send('我已经收到了你发送的消息！你成功的使用了Ajax！完成了Ajax的基本实现步骤!')
})

6. 最后一步就是你要到浏览器中访问我们创建的html文件！【前提是你得把本地服务器打开偶！】
   
   

咦，报错了！他说我的XMLHTTPRequest is not defined也就是没有定义！偶，原来是我写错了!上面的XMLHTTPRequest都写错了！正确的应该是！XMLHttpRequest

这儿我就不进行更改了！， 你们晓得就行了！一定要仔细，引以为戒！哈！

最终的效果如下：

请忽略下面的内容！

前言：

: 一个HTTP请求由4部分组成:

• HTTP请求方法或“动作”(verb)
• 正在请求的URL
• 一个可选的请求头集合，其中可能包括身份验证信息
• 一个可选的请求主体

: 服务器返回的HTTP响应包含3部分:

• -个数字和文字组成的状态码，用来显示请求的成功和失败
• -个响应头集合
• 响应主体

第一 创建一个Ajax对象

var request = new XMLHTTPRequest();

第二指定请求

创建XMLHtpRequest对象之后，发起HTTP请求的下- -步是调用XMLHttpRequest对象的open()方法去指定这个请求的两个必需部分:方法和URL. .

 request.open('GET', 'https://lvhanghmm.gitee.io/x-blog');

open()的第-一个参数指定HTTP方法或动作。这个字符串不区分大小写,但通常大家用大写字母来匹配HTTP协议。“GET" 和“POST”方法是得到广泛支持的。“GET” 用于常规请求，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存时。“POST” 方法常用于HTML表单。它在请求主体中包含额外数据(表单数据)且这些数据常存储到服务器.上的数据库中(副作用)。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

open()的第2个参数是URL,它是请求的主题。这是相对于文档的URL,这个文档包含调用open()的脚本。如果指定绝对URL、协议、主机和端口通常必须匹配所在文档的对应内容:跨域的请求通常会报错。(但是当服务器明确允许跨域请求时，2级当服务器的响应是可缓存时。“POST” 方法常用于HTML表单。它在请求主体中包含额外数据(表单数据)且这些数据常存储到服务器.上的数据库中(副作用)。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。.

如果有请求头的话，请求进程的下个步骤是设置它。例如，POST请求需要“Content-Type”头指定请求主题的MIME类型:

最后一步 使用XMLHTTPRequest发起HTTP请求的最后一步是指定可选的请求主体并向服务器发送它。使用send()方法像如下这样做:

request.send('lvhang');