ajax网络请求的原理

最新推荐文章于 2022-04-23 13:25:14 发布

人间草木96

最新推荐文章于 2022-04-23 13:25:14 发布

阅读量801

点赞数

CC 4.0 BY-SA版权

分类专栏：个人总结面试总结

本文链接：https://blog.youkuaiyun.com/qq_43258252/article/details/88665214

个人总结同时被 2 个专栏收录

122 篇文章

订阅专栏

面试总结

88 篇文章

订阅专栏

XMLHttpRequest 对象

　　XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

传统方法的缺点:

　　传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax

　　ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

五步使用法:

　　1.创建XMLHTTPRequest对象

　　2.使用open方法设置和服务器的交互信息

　　3.设置发送的数据，开始和服务器端交互

　　4.注册事件

　　5.更新界面

下面是例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //AJAX: Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
    //异步：代码会独立运行， 不会阻塞代码继续向下执行（牛逼的服务员）
    //同步：会阻止代码继续向下运行，直到这段同步代码执行完毕，才会继续向下执行（傻服务员）

    //AJAX原理：浏览器的API，XMLHIIPRequest();

    //第一步：实例化AJAX对象
    var ajaxObj = new XMLHttpRequest();

    //第二步：设置参数
    //参数1：发送网络请求的方式（大写小写都可以）
    //参数2：请求服务器的文件地址（建议写绝对路径）（如果非要写相对路径，请把html或js文件放到和请求的文件地址在同一个服务器上）（要确保当前JS代码所在文件和请求的文件在同一个域名和端口下）
    //参数3：异步（true）/同步（false）
    ajaxObj.open("GET","http://localhost/php/1.php",true);

    //第三步：发送请求
    ajaxObj.send();

    //第四步：监听ajax状态变化（因为JS得直到服务器什么时候给我返回了东西）
    ajaxObj.onreadystatechange = function () {
        //第五部：判断网络状态码
        /*
        * readState 是AJAX对象的一个属性，代表AJAX现在的状态
        * 0 -- （未初始化）还没有调用send方法
        * 1 -- （载入）已调用send方法，正在发送请求
        * 2 -- （载入完成）send方法执行完毕，已经接收到全部响应内容
        * 3 -- （解析/交互）ajax正在解析 响应内容
        * 4 -- （完成）响应内容解析完成，可以在客户端使用了
        * */
        if(4 === ajaxObj.readyState){
            /*
            * 网络状态码
            * 200 -- 网络请求成功完成
            * 404 -- 请求的URL未找到
            * 502 -- 服务器未启动
            * （4开头的状态都是客户端的，5开头的问题都是服务器端）
            * */
            if(200 === ajaxObj.status){
                console.log(ajaxObj.responseText);//打印ajax获取到的服务器返回的字符串数据
            }
        }
    }

    //Intellij IDEA 编译器 有一个自带的服务器环境 是localhost：63342
    //XAMPP     服务器环境  是 localhost：80
    //要确保AJAX所在文件和请求的文件 域名+端口号  要一致
    //IDEA 没有PHP运行环境无法执行PHP文件



</script>
</body>
</html>