• 创建ajax的过程


    step1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象; 
    step2. 创建一个新的HTTP请求,并指定改HTTP请求的方法、URL以及验证信息; 
    step3. 设置响应HTTP状态变化的函数; 
    step4. 发送HTTP请求; 
    step5. 获取异步调用返回的数据; 
    step6. 使用javascript和DOM实现局部刷新;

    代码实现:

     1 <script type="text/javascript">
     2     window.onload = function(){
     3         //第一步:创建xhr对象
     4         //xhr是一个对象;里面可以放很多东西,数据;
     5         var xhr = null;
     6         if(window.XMLHttpRequest){//标准浏览器
     7             xhr = new XMLHttpRequest();//创建一个对象
     8         }else{//早期的IE浏览器
     9             xhr = new ActiveXObject('Microsoft.XMLHTTP');//参数是规定的;
    10         }
    11         console.log("状态q"+xhr.readyState);//0
    12         //第二步:准备发送请求-配置发送请求的一些行为
    13         //open即打开链接,第一个参数是以什么方式;第二个是往哪儿发送请求,第三个可以不写,默认true,表示异步,false表示同步;;
    14         xhr.open('get','03form.php',true);
    15         console.log("状态w"+xhr.readyState);//1
    16 
    17         //第三步:执行发送的动作
    18         //send也可以写在前面,推荐写在后面;写null是兼容问题;
    19         xhr.send(null);
    20         console.log("状态e"+xhr.readyState);//1
    21 
    22         //第四步:指定一些回调函数,也属于事件函数;不触发不执行,触发条件是xhr.readyState;z这个值有0-4,共5个状态,是由浏览器控制的;
    23         xhr.onreadystatechange = function(){
    24             if(xhr.readyState == 4){//4指服务器返回的数据可以使用;
    25                 if(xhr.status == 200){ //判断已经成功的获取了数据;200表示hTTP请求成功;404表示找不到页面;503表示服务器端有语法错误;
    26                     var data = xhr.responseText;//json,文本,主角;
    27                     // var data1 = xhr.responseXML;
    28                 }
    29             }
    30             // console.log("状态t"+xhr.readyState);//2表示已经发送完成;
    31 
    32             // console.log(1234);
    33         }
    34 
    35         // console.log(456);
    36         console.log("状态r"+xhr.readyState);//1
    37 
    38 
    39     }
    40     </script>
  • 相关阅读:
    Django的model form
    Django之验证码
    ajax获取跨域数据
    js+css模仿打字效果
    CSS自定义消息提示
    CSS画各种二维图形
    最简单的动态进度条
    利用javascript(自定义事件)记录尺寸可变元素的尺寸变化过程
    超级简单的利用javascript实现文件拖拽事件
    javascript 公历与农历相互转换工具类
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8461623.html
Copyright © 2020-2023  润新知