Ajax入门

Posted qfstudy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax入门相关的知识,希望对你有一定的参考价值。

Ajax简介

Ajax即“Asynchronous javascript and XML”(异步的JavaScript与XML技术)

Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest对象是浏览器提供的一个API,用来顺畅地向服务器发送请求并解析服务器响应,当然整个过程中,浏览器页面不会被刷新。

注意,Ajax 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求,就会报错。

创建Ajax步骤:

var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            console.log(xhr.responseText)
        }else{
            console.log(new Error(xhr.statusText))
        }
    }   
}
xhr.open(‘GET‘,‘./ajax.html‘)
xhr.send()

1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

兼容各个浏览器的创建方法:

function createRequest (){
    try {
        xhr = new XMLHttpRequest();
    }catch (tryMS){
        try {
            xhr = new ActiveXObject("Msxm12.XMLHTTP");
        } catch (otherMS) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (failed) {
                xhr = null;
            }
        }
    }
    return xhr;
}

2.准备请求

xhr.open(method,url,async);

  • open() 的第一个参数是HTTP请求方法 - 有GET,POST,HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母,否则其他一些浏览器(比如FireFox)可能无法处理这个请求。
  • 第二个参数是要作为请求发送目标的URL。
  • 第三个参数是true或false,表示请求是异步还是同步。true是异步,默认true。

3.发送请求

xhr.send();

send() 方法的参数可以是任何你想发送给服务器的内容

4.处理响应

xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            console.log(xhr.responseText)
        }else{
            console.log(new Error(xhr.statusText))
        }
    }   
}

XMLHttpRequest 的实例属性

  1. onreadystatechange :当处理过程发生变化的时候执行onreadystatechange对应的函数

  2. readyState状态值

  • 0:表示 XMLHttpRequest 实例已经生成,但是实例的open()方法还没有被调用。
  • 1:表示open()方法已经调用,但是实例的send()方法还没有调用,仍然可以使用实例的setRequestHeader()方法,设定 HTTP 请求的头信息。
  • 2:表示实例的send()方法已经调用,并且服务器返回的头信息和状态码已经收到。
  • 3:表示正在接收服务器传来的数据体(body 部分)。这时,如果实例的responseType属性等于text或者空字符串,responseText属性就会包含已经收到的部分信息。
  • 4:表示服务器返回的数据已经完全接收,或者本次接收已经失败。
  1. responseText:服务器以文本字符的形式返回

  2. responseXML:获得 XML形式的响应数据

XMLHttpRequest 的实例属性细节:阮一峰:XMLHttpRequest 对象


myButton=document.getElementById(‘myButton‘)
myButton.addEventListener(‘click‘,(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.onreadystatechange=()=>{
       if( xhr.readyState===4){
           console.log("请求响应都完毕了")
           if( xhr.status>=200&& xhr.status<300){
               console.log("请求成功")
           }else if( xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.open(‘GET‘,‘/xxx‘)
    xhr.send()
})

当发送请求的时候,就会根据xml.open(‘GET‘,‘/xxx‘)找到对应的请求路径。在本文是找到/xxx路径,然后返回所请求的数据,在浏览器运行结果如下。

技术分享图片

技术分享图片

以上是关于Ajax入门的主要内容,如果未能解决你的问题,请参考以下文章

推荐net开发cad入门阅读代码片段

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段