AJAX的介绍及使用

最新推荐文章于 2023-04-25 17:06:21 发布

一只欢喜

最新推荐文章于 2023-04-25 17:06:21 发布

阅读量208

点赞数

分类专栏：关于前端知识点集合文章标签： ajax javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_44866810/article/details/128941304

版权

关于前端知识点集合专栏收录该内容

16 篇文章 0 订阅

订阅专栏

什么是Ajax？

是指一种创建交互式网页应用的网页开发技术。

AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）

交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。

XML：一种类似于HTML的标记语言，可以将数据结构化。

异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。

特点:

再不提交整个页面的情况下,实现页面的局部刷新;

AJAX产生的背景：

以前做数据交互的时候，大家通常选择使用表单的方式提交数据，表单提交这种方式，默认的时候会由当前页面跳转到action页面，所以用户体验及其糟糕，所以需要想办法让当前页面，不跳转的同时把数据传递过去，把服务器响应的内容拿回来。

AJAX解决的问题：

指不刷新当前页面，把某些数据传递给服务器，把某些数据从服务器拿回客户端。

注意：AJAX必须依赖www服务执行，即使用http协议来运行。

ajax 的使用

创建Ajax核心对象

var xhr = new XMLHttpRequest();

建立连接

// 语法：
xhr.open("get", url, true);

open() 方法中:

第1个参数指请求的发送方式，值为get或post。

第2个参数指请求的url路径。

第3个参数指请求是异步还是同步，如果写true表示异步（默认true），写false表示同步。

发起请求

// 语法：
xhr.send();

如果是get方式发送请求，send()命令中不用写任何参数

传递的数据可以写在url中，服务器php文件用$_GET["参数名"]接收。

接收响应

// 异步时需要通过 onreadystatechange 监听
// 指如果xhr对象的预备好的状态发生了变化时，触发函数。
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.responseText);
    }
}
// 请求状态4：响应已完成；您可以获取并使用服务器的响应了。
// HTTP状态码200：ok，页面正确打开，并得到完整的响应内容。

onreadystatechange指本次ajax请求的状态发生改变时所触发的事件

readyState 指请求状态

0：请求未初始化（还没有调用 open()）。1：请求已经建立，但是还没有发送（还没有调用 send()）。2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。4：响应已完成；您可以获取并使用服务器的响应了。

status 指http状态（常用的http状态码）

200：ok，页面正确打开，并得到完整的响应内容。301：被请求的资源已永久移动到新位置302：请求的资源临时从不同的 URI响应请求304：缓存404：页面不存在。500：常指后端代码发生错误503：由于临时的服务器维护或者过载，服务器当前无法处理请求。

responseText指接收到的响应结果

发送get方式ajax

通过url携带querystring参数传递数据

        let xhr = new XMLHttpRequest();
        xhr.open("get","/get?name=zhangsan&age=20",true);
        xhr.send();
        xhr.onload = function(){
            console.log(xhr.responseText);
        }

发送post方法ajax

        let xhr = new XMLHttpRequest();
        xhr.open("post","/post",true);
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
        xhr.onload = function(){
            console.log(xhr.responseText);
        }
        let str = "name=123&age=20";
        xhr.send(str);

发送xml数据

xml数据-XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

xml数据格式

 let xml = `<?xml version="1.0" encoding="utf-8" ?>
                <books>
                    <nodejs>
                        <name>nodejs</name>
                        <price>$32</price>
                    </nodejs>
                    <vuejs>
                        <name>vuejs</name>
                        <price>$32</price>
                    </vuejs>
                </books>
                `

ajax请求xml数据

        let xhr = new XMLHttpRequest();
        xhr.open("get","/xml",true);
        xhr.onload = function(){
            console.log(xhr.responseXML);
           let res =  xhr.responseXML.querySelector("nodejs name");
           console.log(res.innerHTML);
        }
        xhr.send();