js 原生ajax请求

2019-12-09 14:52:30 阅读：297 来源： 互联网

标签：原生 readyState http 请求 js ajax responseText 服务器

什么是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()

open()方法

它接收3个参数：

　　1.method：请求类型，如get、post。

　　2.url：请求地址。

　　3.async：规定当前请求是否异步，默认(不填)是异步的。(true为异步，false为同步)

http.open("get","https://api.apiopen.top/recommendPoetry");

setRequestHeader方法

接下来我们通过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));//服务器响应的结果
  }  
}

标签：原生,readyState,http,请求,js,ajax,responseText,服务器
来源： https://www.cnblogs.com/huancheng/p/12010953.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js 原生ajax请求