zoukankan      html  css  js  c++  java
  • 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()
    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));//服务器响应的结果
      }  
    }
  • 相关阅读:
    Qt 多线程使用moveToThread
    FFmpeg下载地址
    选择排序
    数据结构和算法之时间复杂度和空间复杂度
    嵌入式动态库查看需要的依赖库
    Q_UNUSED 的使用
    php对csv文件的读取,写入,输出下载操作
    python一个简单的登录
    python的反射
    python类的特性
  • 原文地址:https://www.cnblogs.com/huancheng/p/12010953.html
Copyright © 2011-2022 走看看