js 原生ajax请求
什么是ajax
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
简单实例:
function request() {
var http = new XMLHttpRequest() // 创建ajax对象
http.open("GET","test1.txt",true); // (规定请求的类型)请求方式 请求地址 同步还是异步
http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 请求头信息
http.send() // (发送请求到服务器)
ajax.onreadystatechange=function(){ // 请求响应
if(ajax.readyState == 4 && ajax.status == 200){
console.log(JSON.parse(ajax.responseText));
}
}
}
request() // 调用
XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)
var http = new XMLHttpRequest()
它接收3个参数:
1.method:请求类型,如get、post。
2.url:请求地址。
3.async:规定当前请求是否异步,默认(不填)是异步的。(true为异步,false为同步)
http.open("get","https://api.apiopen.top/recommendPoetry");
接下来我们通过setRequestHeader方法设置请求头。注意:这个方法必须要在open()方法执行之后才能设置。(也就是必须先调用open()方法)。代码如下:
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
send方法
send方法表示将请求发送到服务器。
当请求类型为post时,send()方法接受一个参数,就是你需要传给后台的参数。get请求可以不填或者填null
http.send()
readyState属性
readyState是XMLHttpRequest对象中的一个属性,它存有服务器响应给我们的状态信息。readyState属性一共有5个值:
- 0: 请求未初始化(代理被创建,但尚未调用 open() 方法)
- 1: 服务器连接已建立(
open
方法已经被调用) - 2: 请求已接收(
send
方法已经被调用,并且头部和状态已经可获得) - 3: 请求处理中(下载中,
responseText
属性已经包含部分数据) - 4: 请求已完成,且响应已就绪(下载操作已完成)
onreadystatechange方法
每当readyState属性改变时,就会触发onreadystatechange()方法,所以我们可以在这个方法里面去获取服务器给我们的响应。
当readyState的值等于4的时候,表示请求已经完成,并且服务器已经把结果返回给我们了。
http.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对象。代码如下:
http.onreadystatechange=function(){
//readyState等于4 并且status等于200(表示请求成功)
if(ajax.readyState==4 && ajax.status==200){
console.log(JSON.parse(ajax.responseText));//服务器响应的结果
}
}
js 原生ajax请求的更多相关文章
- js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
- ajax多文件上传,js原生ajax请求(转)
function uploadImageFile(){ var xhr = new XMLHttpRequest(); //定义表单变量 var file = document.getElementB ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- JS原生ajax
原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...
- Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
- js的ajax请求
1 js原生get请求 <script> window.onload = function(){ var oBtn = document.getElementById('btn'); oB ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- Vue.js之Ajax请求
Vue.js同React.Angular,可以说号称前端三巨头. 前段时间,有个哥们说,Vue.js现在出2.0版本了.可是我现在还是在用1.0的. Vue.js一直都没有好好系统的学习,包括目前公司 ...
随机推荐
- vi操作笔记一
vi命令 gg 到首行 shift + 4 跳到该行最后一个字符 shift + 6 跳到该行首个字符 shift + g 到尾行 vi 可视 G 全选 = 程序对齐 gg 到首行 vi 可视 ...
- JDK1.8 新特性(全)
原文链接:https://blog.csdn.net/qq_29411737/article/details/80835658
- Springmvc使用注解实现执行定时任务(定时器)
1.在Spring配置文件中添加 <task:annotation-driven/> 2.在需要调用执行定时任务的类中使用注解 @Service @Lazy(false) //避免spri ...
- springboot整合httpClient
创建httpClientConfig配置类 @Configuration @PropertySource(value="classpath:/properties/httpClient.pr ...
- Win32汇编过程与宏调用
汇编语言(assembly language)是一种用于电子计算机.微处理器.微控制器或其他可编程器件的低级语言,亦称为符号语言.在汇编语言中,用助记符(Mnemonics)代替机器指令的操作码,用地 ...
- Dreamoon and Strings CodeForces - 477C (字符串dp)
大意: 给定字符串$s$, $p$, 对于$0\le x\le |s|$, 求$s$删除$x$个字符后, $p$在$s$中的最大出现次数. 显然答案是先递增后递减的, 那么问题就转化求最大出现次数为$ ...
- centos7下NFS配置
NFS是Network File System的缩写,即网络文件系统.客户端通过挂载的方式将NFS服务器端共享的数据目录挂载到本地目录下. 前言 四台机器: ,218三台机器的/root/filedi ...
- windows安装npm教程
1.在使用之前,先类掌握3个东西,明白它们是用来干什么的: npm: nodejs 下的包管理器. webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的 ...
- SpringCloud 配置文件 application.yml和 bootstrap.yml区别
前言: SpringBoot默认支持properties和YAML两种格式的配置文件.前者格式简单,但是只支持键值对.如果需要表达列表,最好使用YAML格式.SpringBoot支持自动加载约定名称的 ...
- python 常见内置函数setattr、getattr、delattr、setitem、getitem、delitem
常见内置函数 内置函数:在类的内部,特定时机自动触发的函数 示例1:setattr.getattr.delattr class Person: # def __init__(self, name): ...