原生ajax请求流程

最新推荐文章于 2024-07-30 10:56:44 发布

冰橙雪梨

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量745

点赞数

本文链接：https://blog.csdn.net/hjc000712/article/details/124562474

版权

关键词由CSDN通过智能技术生成

提示：以下是本篇文章正文内容，下面案例可供参考

一、ajax是什么？

ajax可以与后台服务器进行数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二. 使用步骤

1.实例化请求对象

 var http=new XMLHttpRequest ();

2.建立服务器链接

http.open('POST', 'http://127.0.0.1:8000/', true);

3.监听服务器响应

 http.onreadystatechange =function(){
            //服务器响应
            //5.响应成功，传递参数
                //可以获取数据
                //服务器返回是json
                console.log(http.responseText)
            
        }

4.发送请求

 http.send();

全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
     //1.实例化请求对象
     var http=new XMLHttpRequest ();
     //2.建立服务器链接
              //1.请求方式   get post
              //2.url    服务器接口
              //3.async     指当前请求是同步还是异步     true/false
              //同步：请求完成后去执行后续代码（等待请求完成 ）        false
              //异步：请求和后续代码同时执行（不需等待，所有代码同时执行）   true
              //4.5.  用户名和密码，（为了安全）
        http.open('POST', 'http://127.0.0.1:8000/', true);
     /*3.监听服务器响应   1 2 3 4   服务器响应状态    404（页面丢失  200（成功  500（服务器报错*/
        http.onreadystatechange =function(){
            //服务器响应
            //5.响应成功，传递参数
                //可以获取数据
                //服务器返回是json
                console.log(http.responseText)
            
        }
        //4.发送请求
               //send方法的参数取决于请求方式    get post
               //get   url+"?id=1&name=111"
               //post   send()    方法，传递参数
        http.send();
    
</script>
</html>

冰橙雪梨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生ajax请求流程

提示：以下是本篇文章正文内容，下面案例可供参考一、ajax是什么？ajax可以与后台服务器进行数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。二. 使用步骤1.实例化请求对象 var http=new XMLHttpRequest ();2.建立服务器链接http.open('POST', 'http://127.0.0.1:8000/', true);3.监听服务器响应 http.onread...
复制链接

扫一扫