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));//服务器响应的结果
}
}
最新文章
- 11、项目经理要阅读的书籍 - IT软件人员书籍系列文章
- Appcelerator Titanium Studio: JNI_CreateJavaVM missing error
- 正则表达式在JS中的应用
- Oracle 存储过程异常处理
- Yii 框架ajax搜索分页
- HDU-4627 The Unsolvable Problem 简单数学
- XAML 名称范围 (x:) 语言特性
- hdu1166 树状数组
- SuperSocket源码解析之开篇
- 伤不起的戴尔台式机XPS8700脆弱的蓝牙
- jquey插件开发
- 转:扩展方法(C# 编程指南)
- AOP的相关概念
- 如何快速定位到DBGrid的某一行!!!急...
- 【Android】GestureDetector类及其用法
- 02. Pandas 1|数据结构Series、Dataframe
- asp.net中的reportview报错跟预编有关系
- Python2 指定文件编码格式需要注意的地方
- CSS font系列
- 公司HBase基准性能测试之结果篇
热门文章
- 解决Win7上的连接access数据库的问题
- centOS重启网络服务报错
- 将本地镜像上传到Docker镜像仓库
- Petya and Construction Set(图的构造) Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises)
- django CBV装饰器 自定义django中间件 csrf跨站请求伪造 auth认证模块
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
- Centos7.3安装Mysql5.7.26(glibc即linux通用版)
- 怎样理解 MVVM ( Model-View-ViewModel ) ?
- STL之Deque的使用方法
- centos安装配置mariadb