zoukankan      html  css  js  c++  java
  • 原声Ajax的使用

    要学习ajax首先要了解xmlhttprequest对象,这是ajax的核心,通过这个对象向服务器发出异步请求,从服务器获取数据,然后JavaScript操作DOM从而更新页面。

    最关键的获取数据的过程:

    首先了解xmlhttprequest 对象的属性:

    onreadystatechange:每次状态改变所触发事件的事件处理程序。

    responseText:从服务器返回字符串的数据

    responseXml:从服务器返回xml形式

    status:404未找到 200已就绪

    status text:伴随状态码的文本信息

    readystatus:对象状态值

          0(未初始化)对象建立,尚未调用方法(open)

          1(初始化)对象已建立,尚未调用send方法

          2(发送数据)调用send方法,当前状态和http头未知

          3(数据传送中)已接受部分数据,但http头不全,responsebody 和responseText 数据可能出错。

          4(完成)已接受全部数据,数据完整

    一下写一个完整的原生ajax程序:

    //创建xmlhttprequest 对象

    function createXHR(){
    //不同的浏览器创建方式不同
    //非IE浏览器
    var xhr=null;

      if(window.xmlHttpRequest){
        xhr=new XmlHttpRequest();
      }
    //IE浏览器
      if(window.activeXObject){
      try{
        xhr=new ActiveXObject("Mcrosoft.XMLHTTP");
      }catch(e){
       try{
        xhr=new ActiveXObject("msxml2.XMLHTTP");
          }catch(ex){
    }
    }
    }
    }

    function testAjax(){

    //创建ajax

    createXHR();

    if(!xhr){

    console.log("xmlhttprequest创建异常");//控制台打印

    return false;

    }

    xhr.open("post",url,false);

    xhr.onreadystatuschange=function(){

      if(xhr.readystauts==4){

      console.log="数据在加载";

        if(xhr.stauts==200){

      console.log(xhr.responseText);

    }  

    }

    }

    xhr.send();

    }

    }

  • 相关阅读:
    C# 压缩组件介绍与入门
    《Effective C#》快速笔记(六)-
    原生JS实现简单富文本编辑器
    oracle 给表字段把VARCHAR2 换成 CLOB
    java.lang.NoClassDefFoundError: javax/servlet/ServletOutputStream
    Idea中Module is not specified解决办法
    JS用正则替换特殊字符
    对List<Map>里的map的某个属性重复的值进行处理的方法
    ……
    使用原生js 实现点击消失效果
  • 原文地址:https://www.cnblogs.com/cflr/p/6516794.html
Copyright © 2011-2022 走看看