Ajax向服务器端发送请求

Ajax的应用场景

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

Ajax运行原理

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

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

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

Ajax的实现步骤

  1. 创建Ajax对象
var xhr = new XMLHttpRequest();
  1. 告诉Ajax请求地址和请求方式
xhr.open('get','127.0.0.1');
  1. 发送请求
xhr.send();
  1. 获取服务器端给与客户端的响应数据
 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的封装

  1. 给函数设定一些默认值
  2. 创建ajax对象
  3. 拼接转化用户传递参数格式
  4. 配置ajax请求方式和地址
  5. 对不同的方式进行不同的处理
  6. 最后对返回的数据进行输出
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向服务器端发送请求的更多相关文章

  1. 使用Ajax向服务器端发送请求

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. 【03】AJAX 向服务器发送请求

    AJAX 向服务器发送请求   创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...

  3. AJAX - 向服务器发送请求请求

    AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...

  4. Android客户端连接服务器端,向服务器端发送请求HttpURLConnection

    在Java中想后台服务器发送请求一般都直接使用了Java的网络编程,或者使用HttpClient向后台服务器端发送HTTP请求.虽然在安卓中,所有Java的API都可以使用,而却使用其并不会出现什么问 ...

  5. Ajax向Controller发送请求并接受数据需要注意的一个细节

    想用Ajax想向Controller发送请求和接收返回的字符等等.Controller中要使用@ResponseBody注解. <script type="text/javascrip ...

  6. 使用ajax向后台发送请求跳转页面无效的原因

    Ajax只是利用脚本访问对应url获取数据而已,不能做除了获取返回数据以外的其它动作了.所以浏览器端是不会发起重定向的. 1)正常的http url请求,只有浏览器和服务器两个参与者.浏览器端发起一个 ...

  7. AJAX向服务器发送请求

    使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求. metho ...

  8. ajax 向php发送请求

    <html> <head> <script src="clienthint.js"></script> </head> ...

  9. angularjs --- ngResource 类似于 ajax发送请求。

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

随机推荐

  1. Hadoop完整搭建过程(二):伪分布模式

    1 伪分布模式 伪分布模式是运行在单个节点以及多个Java进程上的模式.相比起本地模式,需要进行更多配置文件的设置以及ssh.YARN相关设置. 2 Hadoop配置文件 修改Hadoop安装目录下的 ...

  2. Day12_59_Java多线程

    多线程 1. 什么是进程? * 每个进程是一个应用程序,都有独立的内存空间,一个进程对应一个应用程序. * 例如:在windows操作系统中启动了word就是启动了一个进程,一边听音乐,一边打游戏就是 ...

  3. Kubernetes 降本增效标准指南 | 基于K8s 扩展机制构建云上成本控制系统

    作者 王玉君,腾讯云后台高级开发工程师,负责腾讯云原生系统开发及建设. 晏子怡,腾讯云容器产品经理,在K8s弹性伸缩.资源管理领域有丰富的实战经验. 导语 Kubernetes 作为 IaaS 和 P ...

  4. 数据结构(3):java使用数组模拟堆栈

    堆栈原理: 数组模拟堆栈: //数组模拟栈 class ArrayStack{ //栈顶 private int top = -1; private int maxSize; private int[ ...

  5. 4- MySQL创建表以及增删改查

    查看表结构 查看表的结构,使用命令:desc 表明: 创建表(命令) 格式:使用create table创建表,必须给出下列信息: 1.新表的名字. 2.表中列的名字和定义,用逗号隔开. 语法: cr ...

  6. 03 Django web服务开发 - URL路由

    Django中的APP -Django中的一个APP就是一个应用的意思 -项目可以包含多个APP(多个应用) -一个项目对应一个网站(生活服务网站) 一个APP队形网站的一个应用(二手交易,家政服务) ...

  7. hdu1529 差分约束(好题)

    题意:       超市在每个时间都有需要的人数(24小时)比如 1 0 0 0 0 ....也就是说在第0个小时的时候要用一个人,其他的时间都不用人,在给你一些人工作的起始时间,如果雇佣了这个人,那 ...

  8. hdu4884 模拟

    题意:       一个厨师,他能炒n道菜,他每次炒菜用时t分钟,每次最多可以炒同样的菜k分,有m个人来买饭,给你每个人来的时间和菜的种类以及份数,问你每个人都是什么时候离开的. 思路:       ...

  9. 推荐算法-聚类-DBSCAN

    DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法,类似于均值转移聚类算法,但 ...

  10. Mac使用brew搭建LNMP

    一. brew常用命令 安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/in ...