首页 > 其他分享> > 原生AJAX的操作（五步写法，兼容，封装，跨域）

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

2021-01-16 11:01:23 作者：互联网

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();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

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

3.原生ajax封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function Ajax(method, url, data, callback) {
        var http;
        if (window.XMLHttpRequest) {
            http = new XMLHttpRequest();
        }
        else {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if (methd = "get") {
            if (data) {
                url += "?";
                url += data;
            }
            http.open(method, url);
            http.send();
        }
        else {
            http.open(method, url);
            if (data) {
                http.send(data);
            }
            http.send();
        }
        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                callback(http.response);
            }
        }
    }
    var res=null;
    Ajax("get", "http://localhost:63342/lianxi.main", null, function (result) {
        var data=eval(result);
        res=data;
    });
</script>
</body>
</html>

4.原生ajax跨域

用来测试的node服务器 cros,jsonp配置

let express=require("express");
let app=express();
//后台配置cros跨域
app.use((req,res,next)=>{
    //这里是后端配置cros跨域
    res.header("Access-Control-Allow-Origin","http://127.0.0.1:63342");
    next();
});
app.get("/",(req,res)=>{
    res.send("首页");
});
//get请求接口
app.get("/getStudentInfo",(req,res)=>{
    res.send("学生数据");
});
//jsonp跨域接口
app.get("/userinfo",(req,res)=>{
    //获取get  路径上的值
    console.log(req.query);
    let query=req.query;
    let id=query.id;
    let callback=query.callback;

    let people={
        10086:{
            name:"张三",
            age:20,
            sex:'男'
        }
    }
    res.send(callback+"("+JSON.stringify(people[id])+")");
});
app.listen(80,"127.0.0.1",()=>{
    console.log("http://127.0.0.1:80");
});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function Ajax(method,url,data,callback){
        var http;
        if(window.XMLHttpRequest){
            http = new XMLHttpRequest();
        }
        else{
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(method = "get"){
            if(data){
                url += "?";
                url +=data;
            }
            http.open(method,url);
            http.send();
        }
        else{
            http.open(method,url);
            if(data){
                http.send(data);
            }
            http.send();
        }
        http.onreadystatechange = function(){
            if(http.readyState == 4&& http.status == 200){
                callback(http.response);
            }
        }
    }

    /*
     * 在请求接口的时候  出现错误
     *  No 'Access-Control-Allow-Origin'
     *  涉及到跨域资源共享的问题
     * */
    Ajax('get','http://127.0.0.1/getStudentInfo',null,function (ags){
        console.log(ags);
    });
</script>
</body>
</html>

标签：http,跨域,get,url,res,send,AJAX,五步,data
来源： https://blog.csdn.net/mab_1994/article/details/112692519