前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ajax向服务器端发送请求

Ajax向服务器端发送请求

作者头像
小丞同学
发布2021-08-16 16:02:07
2.2K0
发布2021-08-16 16:02:07
举报
文章被收录于专栏:小丞前端库

Ajax向服务器端发送请求

Ajax的应用场景

  1. 页面上拉加载更多数据
  2. 列表数据无刷新分页
  3. 表单项离开焦点数据验证
  4. 搜索框提示文字下拉列表

Ajax运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。

Ajax是一种异步进程,程序不会等待异步代码执行完后再继续执行后续代码

当后续代码需要调用Ajax返回的数据时,可能会有数据未返回的问题

Ajax的实现步骤

  1. 创建Ajax对象
代码语言:javascript
复制
var xhr = new XMLHttpRequest();

2. 告诉Ajax请求地址和请求方式

代码语言:javascript
复制
xhr.open('get','127.0.0.1');

3. 发送请求

代码语言:javascript
复制
xhr.send();

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

代码语言:javascript
复制
 xhr.onload = function () {
     console.log(xhr.responseText);
 }

服务器端响应的数据格式

服务器端大多数情况下会以JSON对象作为响应数据的格式

http请求和响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。

代码语言:javascript
复制
JSON.parse();//将json字符串转化为json对象
代码语言:javascript
复制
JSON.stringify() // 将json对象转换为json字符串

GET请求方式

代码语言:javascript
复制
xhr.open('get','http://www.');

get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的。

POST请求方式

代码语言:javascript
复制
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send();

Ajax状态值

在Ajax请求执行的过程中每一步都对应一个状态码

数值

意义

0

请求没有初始化,没有调用 open()

1

请求已经建立,但是没有发送 send()

2

请求已经发送

3

请求正在处理,通常响应中已经有部分数据可以使用了

4

响应已经完成,可以获取并使用服务器响应了

代码语言:javascript
复制
xhr.readyState;//获取Ajax状态值

onreadstatechange事件

Ajax状态码发生变化的时候触发

代码语言:javascript
复制
 // 当Ajax状态码发生变化时触发事件
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 输出响应数据
         console.log(xhr.responseText);
     }
 }

HTTP状态码

代码语言:javascript
复制
xhr.status();//响应的HTTP状态码

状态码

意义

1xx

信息响应类,表示接收到请求并且继续处理

2xx

处理成功响应类,表示动作被成功接收、理解和接受

3xx

重定向响应类,为了完成指定的动作,必须接受进一步处理

4xx

客户端错误,请求可能出错,妨碍服务器的处理

5xx

服务端错误,服务器不能正确执行一个正确的请求

低版本浏览器缓存问题

由于缓存的存在,在请求地址不发生改变的情况下,只有第一次的数据请求会发送到服务器端,后续的请求都会从浏览器的缓存中获取

解决方法:改变请求的地址

代码语言:javascript
复制
xhr.open('get','http://xxx.com?t=' + Math.random());

通过Math下的方法产生随机数,使请求地址不同

也可以使用Date下的方法,利用时间戳,也可以使值不同

Ajax的封装

  1. 给函数设定一些默认值
  2. 创建ajax对象
  3. 拼接转化用户传递参数格式
  4. 配置ajax请求方式和地址
  5. 对不同的方式进行不同的处理
  6. 最后对返回的数据进行输出
代码语言:javascript
复制
function ajax (options) {
	// 设置初始化的默认值
	var defaults = {
		type: 'get',
		url: '',
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	}
	// 通过assign的方法用options的值替换defaults
	Object.assign(defaults, options);
	// 创建ajax对象
	var xhr = new XMLHttpRequest();
	//处理用户传入的data数据,拼接成特定的数据格式传递给服务器端
	var params = '';
	// 循环参数
	for (var attr in defaults.data) {
		// 参数拼接
		params += attr + '=' + defaults.data[attr] + '&';
		// 去掉参数中最后一个&
		//从第一位截取到倒数第一位并返回
		params = params.substr(0, params.length-1)
	}
	// 如果请求方式为get
	if (defaults.type == 'get') {
		// 将参数拼接在url地址的后面
		defaults.url += '?' + params;
	}

	// 配置ajax请求
	xhr.open(defaults.type, defaults.url);
	// 如果请求方式为post
	if (defaults.type == 'post') {
		// 设置请求头
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
		// 如果向服务器端传递的参数类型为json
		if (defaults.header['Content-Type'] == 'application/json') {
			// 将json对象转换为json字符串
			xhr.send(JSON.stringify(defaults.data))
		}else {
			// 发送请求
			//post请求参数放在send中
			xhr.send(params);
		}
	} else {
		xhr.send();
	}
	// 请求加载完成
	xhr.onload = function () {
		// 获取服务器端返回数据的类型
		var contentType = xhr.getResponseHeader('content-type');
		// 获取服务器端返回的响应数据
		var responseText = xhr.responseText;
		// 如果服务器端返回的数据是json数据类型
		if (contentType.includes('application/json')) {
			// 将json字符串转换为json对象
			responseText = JSON.parse(responseText);
		}
		// 如果请求成功
		if (xhr.status == 200) {
			// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
			defaults.success(responseText, xhr);
		} else {
			// 调用失败回调函数并且将xhr对象传递给回调函数
			defaults.error(responseText, xhr);
		} 
	}
	// 当网络中断时
	xhr.onerror = function () {
		// 调用失败回调函数并且将xhr对象传递给回调函数
		defaults.error(xhr);
	}
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/03/14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Ajax向服务器端发送请求
    • Ajax的应用场景
      • Ajax运行原理
        • Ajax的实现步骤
          • 服务器端响应的数据格式
            • GET请求方式
              • POST请求方式
                • Ajax状态值
                  • onreadstatechange事件
                    • HTTP状态码
                      • 低版本浏览器缓存问题
                        • Ajax的封装
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档