美文网首页
原生JavaScript实现Ajax

原生JavaScript实现Ajax

作者: luichooy | 来源:发表于2016-12-07 19:38 被阅读31次
function ajax(){
    var xhr = null;

    //实例化XMLHttpRequest对象
    if(window.ActiveXObject){//ie5、ie6
        xhr = new Active XObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }

    //通过open方法初始化XMLHttpRequest对象,指定请求的method、url、async参数,true表示异步加载(默认),false为同步
    xhr.open("GET","test.php",true);

    //注册回调事件处理器,当XMLHttpRequest.readuyState发生变化时,激发readystatechange事件,从而调用这里注册的处理器ajaxCallBack
    xhr.onreadystatechange = ajaxCallBack;

    //发送请求
    //GET请求
    xhr.send(null);

    //POST请求,添加请求的HTTP头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    //POST请求,参数为发送给服务器的请求数据
    xhr.send('String');
}

function ajaxCallBack(){
    if(xhr.readyState == 4){//请求完成加载
        if(xhr.status == 200){//响应已经成功
            console.log(xhr.responseText);//打印响应内容

            //在实际开发中,这里的响应内容一般为JSON格式数据,所以我们要先将JSON数据进行解析
            var res = xhr.responseText;
            var data = JSON.parse(res);

            if(data.status == 0){
                //进行数据操作
            }
            else{
                //打印后台给的错误信息
                console.log(data.info);
            }
        }
    }
}

`

相关文章

  • 手写Ajax(JSONP)

    参考:原生 JavaScript 实现 AJAX、JSONP XMLHttpRequest的使用 参考:XMLHt...

  • AJAX请求

    原生JavaScript中的AJAX请求 AJAX = Asynchronous JavaScript and X...

  • 原生JavaScript实现Ajax

    `

  • javascript四种ajax方法

    javascript要实现ajax,目前有四种方法 原生XMLHttpRequest方法 原生太麻烦,所以有很多库...

  • ajax总结

    1. Ajax 1.1 原生JavaScript封装Ajax 1.2 jquery ajax 及其 快捷方法 $....

  • Ajax-XMLHttpRequest学习笔记

    最近回归到原生JavaScript巩固基础,学习了原生JavaScript的ajax操作。 XMLHttpRequ...

  • Ajax

    什么是Ajax(Asynchronous JavaScript and Xml):Ajax通过原生的XMLHttp...

  • Ajax和跨域总结

    Ajax(JavaScript实现) 简介 Ajax(Async Javascript And Xml):异步Js...

  • 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时...

  • Ajax

    标签: Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

网友评论

      本文标题:原生JavaScript实现Ajax

      本文链接:https://www.haomeiwen.com/subject/juhjmttx.html