zoukankan      html  css  js  c++  java
  • Ajax简单的异步交互

       ajax简单的异步交互,可以先从get方式开始说起

    那么创建一个Ajax与服务器端的异步请求,需要完成三个

    步骤1、XMLHttpRequest对象的创建

    if(window.XMLHttpRequest){//针对IE7以上 以及标准浏览器
        var xhr=new XMLHttoRequest();
    }else if(window.ActiveXObject){
        var xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

    步骤2、注册回调函数

    xhr.onreadystatechange=callback;
    或者xhr.onreadystatechange=function(){
      //codes here  
    }

    步骤3、设置连接信息

    xhr.open("GET",url,true)//其中true表示为异步交互

    步骤4、发送数据

    xhr.send(null);

    ps:同步方式下:send会在服务器返回数据后才执行

    异步方式下:send会立即完成执行

    function callback(){//注册回调函数
      //判断对象的状态是否交互完成
      if(xhr.readyState==4){
       //判断http请求是否成功
        if(xhr.status==200){
           //获取服务器端返回的数据
           var response=xhr.responseText; 
           //可以显示在前台特定的地方 
        }
     }  
    }    

    最后注意一个问题,也是当初测试时候遇到的问题,这种写好的代码要在服务器端环境下运行,要将写好的东西,部署在本机服务器环境下,通过localhost来访问,方可看到效果,否则会报错!

    第二部分,如果是发送ajax的post异步请求

    xmlHttp.onreadystatechange = callback;
            xmlHttp.open("POST",url,true);
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
            xmlHttp.send(parameter);

    注意以上几点,必须要设置一个请求的头文件,send里面发送一些我们需要的参数

  • 相关阅读:
    一条痛并快乐的路
    Daily Scrum 11.1
    Daily Scrum 10.31
    Daily Scrum 10.30
    Daily Scrum 10.29
    Daily Scrum 10.28
    Daily Scrum 10.27
    (Alpha)Let's-Chronos分数分配规则
    Daily Scrum 10.26
    Daily Scrum 10.25
  • 原文地址:https://www.cnblogs.com/caichongdd/p/2674399.html
Copyright © 2011-2022 走看看