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

本文链接：https://blog.youkuaiyun.com/mab_1994/article/details/112692519

本文详细介绍了原生AJAX的五步操作方法，包括创建XMLHttpRequest对象、打开连接、设置请求头、发送请求及处理响应。同时，讨论了如何进行浏览器兼容性处理，以及如何封装AJAX函数以提高复用性。最后，重点阐述了原生AJAX实现跨域的策略，如CORS和JSONP，并给出了相关配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()