Ajax的基本使用

目录

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();
  1. 告诉Ajax请求方式以及请求地址
xhr.open('get', 'http://www.baidu.com');
  1. 发送请求
xhr.send();
  1. 获取服务端给予客户端的响应数据
	xhr.onload = function() {
			console.log(xhr.responseText);
		}

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

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

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

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

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

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

<script type="text/javascript">
		// 1 创建Ajax对象
		let xhr = new XMLHTTPRequest();
		// 2 告诉Ajax对象要想哪儿发送请求，以什么方式发送请求
		// 1）请求方式2）请求地址
		// 现在你是访问不了这个地址的会提示你资源无法找到， 很正常， 因为我们还米有配置路由呢！
		// 服务端的请求方式和请求地址一定要和客户端对应起来!
		xhr.open('get', 'http://localhost:3003/basicUseOfAjaxTest');
		// 发送请求
		xhr.send();
		// 获取服务器端响应到客户端的数据！
		xhr.onload = function() {
		console.log(xhr.responseText)
		}

	</script>
  1. 在app.js中书写路由：重点是：服务端的请求方式和请求地址一定要和客户端对应起来! 也就是我们请求的方式是get， 那么书写路由时的方式也是get
// 第一个参数是地址， 第二个参数是请求处理函数！
app.get('/basicUseOfAjaxTest', (req, res) => {
	res.send('我已经收到了你发送的消息！你成功的使用了Ajax！完成了Ajax的基本实现步骤!')
})
  1. 最后一步就是你要到浏览器中访问我们创建的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');
posted @ 2021-01-01 22:14  lvhanghmm  阅读(180)  评论(0)    收藏  举报