Ajax向服务器端发送请求
Ajax向服务器端发送请求
Ajax的应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
Ajax运行原理
Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。
Ajax是一种异步进程,程序不会等待异步代码执行完后再继续执行后续代码
当后续代码需要调用Ajax返回的数据时,可能会有数据未返回的问题
Ajax的实现步骤
- 创建Ajax对象
var xhr = new XMLHttpRequest();
- 告诉Ajax请求地址和请求方式
xhr.open('get','127.0.0.1');
- 发送请求
xhr.send();
- 获取服务器端给与客户端的响应数据
xhr.onload = function () {
console.log(xhr.responseText);
}
服务器端响应的数据格式
服务器端大多数情况下会以JSON
对象作为响应数据的格式
在http
请求和响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。
JSON.parse();//将json字符串转化为json对象
JSON.stringify() // 将json对象转换为json字符串
GET请求方式
xhr.open('get','http://www.');
get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的。
POST请求方式
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send();
Ajax状态值
在Ajax请求执行的过程中每一步都对应一个状态码
数值 | 意义 |
---|---|
0 | 请求没有初始化,没有调用 open() |
1 | 请求已经建立,但是没有发送 send() |
2 | 请求已经发送 |
3 | 请求正在处理,通常响应中已经有部分数据可以使用了 |
4 | 响应已经完成,可以获取并使用服务器响应了 |
xhr.readyState;//获取Ajax状态值
onreadstatechange
事件
Ajax状态码发生变化的时候触发
// 当Ajax状态码发生变化时触发事件
xhr.onreadystatechange = function () {
// 判断当Ajax状态码为4时
if (xhr.readyState == 4) {
// 输出响应数据
console.log(xhr.responseText);
}
}
HTTP状态码
xhr.status();//响应的HTTP状态码
状态码 | 意义 |
---|---|
1xx | 信息响应类,表示接收到请求并且继续处理 |
2xx | 处理成功响应类,表示动作被成功接收、理解和接受 |
3xx | 重定向响应类,为了完成指定的动作,必须接受进一步处理 |
4xx | 客户端错误,请求可能出错,妨碍服务器的处理 |
5xx | 服务端错误,服务器不能正确执行一个正确的请求 |
低版本浏览器缓存问题
由于缓存的存在,在请求地址不发生改变的情况下,只有第一次的数据请求会发送到服务器端,后续的请求都会从浏览器的缓存中获取
解决方法:改变请求的地址
xhr.open('get','http://xxx.com?t=' + Math.random());
通过Math
下的方法产生随机数,使请求地址不同
也可以使用Date
下的方法,利用时间戳,也可以使值不同
Ajax的封装
- 给函数设定一些默认值
- 创建ajax对象
- 拼接转化用户传递参数格式
- 配置ajax请求方式和地址
- 对不同的方式进行不同的处理
- 最后对返回的数据进行输出
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);
}
}
Ajax向服务器端发送请求的更多相关文章
- 使用Ajax向服务器端发送请求
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 【03】AJAX 向服务器发送请求
AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...
- AJAX - 向服务器发送请求请求
AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...
- Android客户端连接服务器端,向服务器端发送请求HttpURLConnection
在Java中想后台服务器发送请求一般都直接使用了Java的网络编程,或者使用HttpClient向后台服务器端发送HTTP请求.虽然在安卓中,所有Java的API都可以使用,而却使用其并不会出现什么问 ...
- Ajax向Controller发送请求并接受数据需要注意的一个细节
想用Ajax想向Controller发送请求和接收返回的字符等等.Controller中要使用@ResponseBody注解. <script type="text/javascrip ...
- 使用ajax向后台发送请求跳转页面无效的原因
Ajax只是利用脚本访问对应url获取数据而已,不能做除了获取返回数据以外的其它动作了.所以浏览器端是不会发起重定向的. 1)正常的http url请求,只有浏览器和服务器两个参与者.浏览器端发起一个 ...
- AJAX向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求. metho ...
- ajax 向php发送请求
<html> <head> <script src="clienthint.js"></script> </head> ...
- angularjs --- ngResource 类似于 ajax发送请求。
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
随机推荐
- Hadoop完整搭建过程(二):伪分布模式
1 伪分布模式 伪分布模式是运行在单个节点以及多个Java进程上的模式.相比起本地模式,需要进行更多配置文件的设置以及ssh.YARN相关设置. 2 Hadoop配置文件 修改Hadoop安装目录下的 ...
- Day12_59_Java多线程
多线程 1. 什么是进程? * 每个进程是一个应用程序,都有独立的内存空间,一个进程对应一个应用程序. * 例如:在windows操作系统中启动了word就是启动了一个进程,一边听音乐,一边打游戏就是 ...
- Kubernetes 降本增效标准指南 | 基于K8s 扩展机制构建云上成本控制系统
作者 王玉君,腾讯云后台高级开发工程师,负责腾讯云原生系统开发及建设. 晏子怡,腾讯云容器产品经理,在K8s弹性伸缩.资源管理领域有丰富的实战经验. 导语 Kubernetes 作为 IaaS 和 P ...
- 数据结构(3):java使用数组模拟堆栈
堆栈原理: 数组模拟堆栈: //数组模拟栈 class ArrayStack{ //栈顶 private int top = -1; private int maxSize; private int[ ...
- 4- MySQL创建表以及增删改查
查看表结构 查看表的结构,使用命令:desc 表明: 创建表(命令) 格式:使用create table创建表,必须给出下列信息: 1.新表的名字. 2.表中列的名字和定义,用逗号隔开. 语法: cr ...
- 03 Django web服务开发 - URL路由
Django中的APP -Django中的一个APP就是一个应用的意思 -项目可以包含多个APP(多个应用) -一个项目对应一个网站(生活服务网站) 一个APP队形网站的一个应用(二手交易,家政服务) ...
- hdu1529 差分约束(好题)
题意: 超市在每个时间都有需要的人数(24小时)比如 1 0 0 0 0 ....也就是说在第0个小时的时候要用一个人,其他的时间都不用人,在给你一些人工作的起始时间,如果雇佣了这个人,那 ...
- hdu4884 模拟
题意: 一个厨师,他能炒n道菜,他每次炒菜用时t分钟,每次最多可以炒同样的菜k分,有m个人来买饭,给你每个人来的时间和菜的种类以及份数,问你每个人都是什么时候离开的. 思路: ...
- 推荐算法-聚类-DBSCAN
DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法,类似于均值转移聚类算法,但 ...
- Mac使用brew搭建LNMP
一. brew常用命令 安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/in ...