原生ajax 请求
什么是ajax
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,也就是我们所说的局部更新。
简单示例
function play(){
var ajax = new XMLHttpRequest();
ajax.open("get","https://api.apiopen.top/recommendPoetry");
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState == 4 && ajax.status == 200){
console.log(JSON.parse(ajax.responseText));
}
}
}
play();
XMLHttpRequest 对象
如果需要使用ajax 我们需要创建一个XMLHttpRequest对象。代码如下:
var ajax = new XMLHttpRequest();
它接收3个参数:
1.method:请求类型,如get、post。
2.url:请求地址。
3.async:规定当前请求是否异步,默认(不填)是异步的。(true为异步,false为同步)
ajax.open("get","https://api.apiopen.top/recommendPoetry");
接下来我们通过setRequestHeader方法设置请求头。注意:这个方法必须要在open()方法执行之后才能设置。(也就是必须先调用open()方法)。代码如下:
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
send方法
send方法表示将请求发送到服务器。
当请求类型为post时,send()方法接受一个参数,就是你需要传给后台的参数。get请求可以不填或者填null
ajax.send();
这时请求已经发送出去了,那我们如何知道服务器是否接收到了请求?如何接收服务器给我们的响应呢?
readyState属性
readyState是XMLHttpRequest对象中的一个属性,它存有服务器响应给我们的状态信息。readyState属性一共有5个值:
- 0: 请求未初始化(代理被创建,但尚未调用 open() 方法)
- 1: 服务器连接已建立(
open
方法已经被调用) - 2: 请求已接收(
send
方法已经被调用,并且头部和状态已经可获得) - 3: 请求处理中(下载中,
responseText
属性已经包含部分数据) - 4: 请求已完成,且响应已就绪(下载操作已完成)
onreadystatechange方法
每当readyState属性改变时,就会触发onreadystatechange()方法,所以我们可以在这个方法里面去获取服务器给我们的响应。
当readyState的值等于4的时候,表示请求已经完成,并且服务器已经把结果返回给我们了。
ajax.onreadystatechange=function(){
//readyState等于4 并且status等于200(表示请求成功)
if(ajax.readyState==4 && ajax.status==200){
console.log(ajax.responseText);//服务器响应的结果
}
}
responseText和responseXML属性
responseText:获得字符串形式的响应数据。
responseXML:获得XML形式的响应数据。
我们上面使用的是responseText属性,但一般需要的是json格式数据,我们可以使用JSON.parse()让字符串转换成json对象。代码如下:
ajax.onreadystatechange=function(){
//readyState等于4 并且status等于200(表示请求成功)
if(ajax.readyState==4 && ajax.status==200){
console.log(JSON.parse(ajax.responseText));//服务器响应的结果
}
}
原生ajax 请求的更多相关文章
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
- JavaScript原生Ajax请求纯文本数据
源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...
- 原生ajax请求
$('#send').click(function(){ //请求的5个阶段,对应readyState的值 //0: 未初始化,send方法未调用: //1: 正在发送请求,send方法已调用: // ...
- php下的原生ajax请求
浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应. 意味着我们的浏览器不提交,通过JS就可以请求服务器. ajax(Asynchron ...
- 原生ajax请求的五个步骤
//第一步,创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); function CommentAll() { //第二步,注册回调函数 xm ...
- js 原生ajax请求
什么是ajax 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可 ...
随机推荐
- 自己用canvas写的贪吃蛇代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 英特尔® Open Image Denoise 库有助于节省时间,提高质量
在使用光线跟踪增强真实性与沉浸感时,游戏开发人员面临复杂的权衡.为了克服一系列挑战,英特尔创建了使用光线跟踪进行图像渲染的一整套解决方案,包含高性能开源滤波器.该解决方案已发布测试版,被集成至 Uni ...
- lua基础学习(五)
一.Lua 模块与包 模块类似于一个封装库,从 Lua 5.1 开始,Lua 加入了标准的模块管理机制,可以把一些公用的代码放在一个文件里,以 API 接口的形式在其他地方调用,有利于代码的重用和降低 ...
- BadUsb简单用法示例
所需硬件 badusb 自行淘宝 驱动程序会自动安装,若未自动安装自行百度 所需工具 arduino-1.5.5-r2用于编辑代码并上传至badusb badusb连接至电脑 打开ard ...
- zookeeper集群的搭建(CentOS 7)
注意ip地址为: 虚拟机ip设置 TYPE="Ethernet"BOOTPROTO="static"NAME="enp0s3"DEVICE= ...
- C++中函数异常规格的说明
1,本文介绍一个新的概念,它是一个重要的概念,并且是 C++ 中的一个高级主题: 2,问题: 1,如何判断一个函数(不是自己写的,有可能是第三方库中的函数)是否会抛出异常,以及抛出那些异常? 1,学习 ...
- python 类(2)
""" """class BaseCat(object): """ 猫科基础类""&quo ...
- DNS服务器搭建笔记
DNS在linux服务器上的服务名是named,而named服务依赖软件bind. 环境: 系统版本:VBOX虚拟机centos6.0. 本机内网IP 192.168.2.198. ...
- [..net core]4.入口,Main方法 及InProcess
通常控件台程序都有一个main方法, public class Program { public static void Main(string[] args) { CreateWebHostBuil ...
- visual studio git 忽略文件配置模板
## Ignore Visual Studio temporary files, build results, and## files generated by popular Visual Stud ...