原生AJAX的操作（五步写法，兼容，封装，跨域）

最新推荐文章于 2024-01-13 22:40:12 发布

VIP文章进击的小野马

最新推荐文章于 2024-01-13 22:40:12 发布

阅读量1.4k

点赞数 1

分类专栏： JS 文章标签： ajax jsonp vscode javascript

本文链接：https://blog.csdn.net/mab_1994/article/details/112692519

版权

1. ajax的五步写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    /*第一步：创建ajax对象*/
    var http = new XMLHttpRequest();

    /*第二步：建立服务器连接
    * open()
    * args:
    * 1.发送请求的参数  get post
    * 2.api路径
    * 3.async  返回true/false  同步或异步
    *   同步：等待请求完成之后再执行后续代码
    *   异步：请求和后续代码一起执行
    * 4.连接接口的账号
    * 5.连接接口的密码
    * */
    http.open("get","https//:www.maodou.com",true,"admin","pwd");

    /*第三步：发送请求
    * send();
    *   如果是get请求 send（）不写参数  传递到后台的数据还在，在路径后面以 ？id&name=zzz格式放着
    *   如果是post请求  添加参数   send(date);
    * */
    http.send();

    /*第四步：监听服务器响应状态
    * 如果服务器响应
     http.status   200  服务器响应成功  500  服务器报错  404  页面丢失
     http.readyState
             0: 请求未初始化
             1: 服务器连接已建立
             2: 请求已接收
             3: 请求处理中
             4: 请求已完成，且响应已就绪
     响应完成之后数据在
     http.response
     http.responseText
     http.responseXML  xml数据
    * */
    http.onreadystatechange = function(){
   

    }

    /*第五步：渲染界面*/
</script>
</body>
</html>

2.原生ajax书写兼容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
   
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest()

最低0.47元/天解锁文章

进击的小野马

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生AJAX的操作（五步写法，兼容，封装，跨域）

1.ajax的五步写法<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> /*第一步：创建ajax对象*/ var http = new XMLHttpRequest(); /*第二步：建立服务器连接
复制链接

扫一扫