原生ajax请求

最新推荐文章于 2023-05-15 11:59:13 发布

李先生打代码

最新推荐文章于 2023-05-15 11:59:13 发布

阅读量517

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_59993469/article/details/121664937

版权

本文详细介绍了XMLHttpRequest对象及其在AJAX技术中的核心作用。XMLHttpRequest允许在不刷新整个页面的情况下与服务器进行数据交互，实现了网页的异步更新。通过实例化AJAX对象、设置请求参数、发送请求、监听状态变化以及处理响应，可以实现原生的AJAX请求。AJAX技术有效解决了传统网页刷新的不便，提高了用户体验。

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

XMLHttpRequest 对象

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

什么是ajax

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

下面是例子

//第一步：实例化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获取到的服务器返回的字符串数据
            }
        }

就可以实现原生的axaj