>>>>>原生js的Ajax

第一步:获得XMLHttpRequest对象;

var ajax = new XMLHttpRequest();

第二步:设置状态监听函数

ajax.onreadystatechange = function(){}

第三步:open一个请求:

  • 其中,第一个参数为传递方式:get/post;
  • 第二个参数:请求数据的url地址;
  • 第三个参数:true/false。true表示异步请求。false表示同步请求
ajax.open("GET","user.json",true); 

第四步:send一个请求。可以发送对象和字符串,不需要传递数据发送null;

ajax.send(null);

第五步,在监听函数中,判断readyState==4 && status == 200表示请求成功;

if (ajax.readyState == 4 && ajax.status == 200) {}

第六步,使用ajax.responseText、ajax.responseXML接收响应数据,并使用原生js操作DOM进行显示;

console.log(JSON.parse(ajax.responseText));

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
  <script type="text/javascript">
     //第一步:获得XMLHttpRequest对象
       var ajax = new XMLHttpRequest();              
    //第二步:设置状态监听函数
       ajax.onreadystatechange = function(){
            //console.log(ajax.readyState);
           //console.log(ajax.status);
           //第五步,在监听函数中,判断readyState==4 && status == 200表示请求成功;         
           if (ajax.readyState == 4 && ajax.status == 200) {        
             //第六步,使用ajax.responseText、ajax.responseXML接收响应数据,并使用原生js操作DOM进行显示
             //console.log(ajax.responseText);               
             //console.log(ajax.responseXML);//返回不是XMl,显示null
             console.log(JSON.parse(ajax.responseText));         
             //console.log(eval("("+ajax.responseText+")"));                                
           }
        }              
      //第三步:open一个请求
        ajax.open("GET","user.json",true); //true表示异步请求。false表示同步请求         
     //第四步:send一个请求。可以发送对象和字符串,不需要传递数据发送null;
        ajax.send(null);
              
        var str = "alert('666')";
        eval(str); 
        eval("alert('666')"); 
             
        var jsonU = "{'name':'jack'}";     
        console.log(eval("("+jsonU+")")); 
    </script> 
</head>
<body>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、什么是AJAX?以及AJAX诞生缘由 什么是AJAX? AJAX全称是异步JS和XML(Asynchronou...
    风起云帆阅读 1,852评论 0 0
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,655评论 0 7
  • 前段时间,我学习了AJAX的相关基础内容,虽然其中还有许多未明白的地方,但是已经可以进行最基本的使用的了,所以写下...
    大春春阅读 7,326评论 0 1
  • 初学ajax,分装的ajax方法
    东东丶酱阅读 1,768评论 0 0
  • 周六的清晨,天还没亮,听着门咚的一声响,知道女儿起床去上学了,我又继续我的梦。大约七点多,铃声响了,哦,该起床做饭...
    飘舞的雪_2467阅读 1,820评论 0 3