神马是Ajax?

Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术。

http请求

首先要了解http请求的方法(GET和POST)。

GET用于获取数据。GET是在URL中传递数据,她的安全系数低,容量相对来说也低了不少。

POST用于上传数据。POST安全性相对较高,容量几乎无限。

Ajax请求

Ajax请求分为四步:(与把大象装进冰箱类似):

1.创建Ajax对象:

在创建对象的时候有些兼容问题:

var oAjax = new XMLHttpRequest(); // 兼容ie6以上版本
var oAjax = ActiveXObject('Microsoft.XMLHTTP'); // 兼容ie6

合并以上代码:

var oAjax = null;
if(window.XMLHttpRequest){
    oAjax = new XMLHttpRequest();
}else{
    oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}

2.链接服务器:

这里会用到open()方法。open()方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。

oAjax.open('GET', url , true);

3.发送请求:

这里会用到send()方法。

oAjax.send();

4.接收返回值:

onreadystatechange事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState:请求状态,返回的是整数(0-4)。

0(未初始化):还没有调用 open() 方法。

1(载入):已调用 send() 方法,正在发送请求。

(载入完成):send() 方法完成,已收到全部响应内容。

(解析):正在解析响应内容。

(完成):响应内容解析完成,可以在客户端调用。

status:请求结果,返回 200 或者 404

responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串

oAjax.onreadystatechange = function(){
    if(oAjax.readyState == 4){
         if(oAjax.status == 200){
              fnSucc(oAjax.responseText);
         }else{
              if(fnFaild){
                   fnFaild();
              }
         }
    }
};

我们将以上代码,进行封装:

function ajax(url, fnSucc, fnFaild){
    //1.创建对象
    var oAjax = null;
    if(window.XMLHttpRequest){
        oAjax = new XMLHttpRequest();
    }else{
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.连接服务器
    oAjax.open('GET', url, true);   //open(方法, url, 是否异步)

    //3.发送请求
    oAjax.send();

    //4.接收返回
    oAjax.onreadystatechange = function(){  //OnReadyStateChange事件
        if(oAjax.readyState == 4){  //4为完成
            if(oAjax.status == 200){    //200为成功
                fnSucc(oAjax.responseText)
            }else{
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    };
}

下面再分享一个从网上看到的模拟jquery的$.ajax方法的封装:

var createAjax = function(){
    var xhr=null;
    try {
        xhr=new ActiveXObject("microsoft.xmlhttp"); // IE系列浏览器
    } catch(e1) {
        try{
            xhr=new XMLHttpRequest(); // 非IE浏览器
        } catch(e2) {
            window.alert("您的浏览器不支持ajax,请更换!");
        }
    }
    return xhr;
};
var ajax=function(conf){
    var type=conf.type; // type参数,可选
    var url=conf.url; // url参数,必填
    var data=conf.data; // data参数可选,只有在post请求时需要
    var dataType=conf.dataType; // datatype参数可选
    var success=conf.success; // 回调函数可选
    if (type == null) {
        type="get"; // type参数可选,默认为get
    }
    if (dataType == null){
        dataType="text"; // dataType参数可选,默认为text
    }
    var xhr = createAjax();
    xhr.open(type,url,true);
    if (type=="GET" || type=="get") {
        xhr.send(null);
    } else if (type=="POST" || type=="post") {
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(data);
    }
    xhr.onreadystatechange=function(){
        if ((xhr.readyState == 4) && (xhr.status == 200)) {
            if (dataType=="text" || dataType=="TEXT"){
                if (success != null){
                    success(xhr.responseText); // 普通文本
                }
            } else if(dataType=="xml" || dataType=="XML"){
                if (success != null){
                    success(xhr.responseXML); // 接收xml文档
                }
            } else if (dataType=="json" || dataType=="JSON"){
                if (success != null) {
                    success(eval("("+xhr.responseText+")")); //将json字符串转换为js对象
                }
            }
        }
    };
}; 

该方法使用也很简单,和jquery的$.ajax方法一样,不过没那么多的参数。仅仅是简单的实现了一些基本的ajax功能。使用方法如下:

ajax({
    type:"post",//post或者get,非必须
    url:"test.jsp",//必须的
    data:"name=dipoo&info=good",//非必须
    dataType:"json",//text/xml/json,非必须
    success:function(data){//回调函数,非必须
        alert(data.name);
    }
});

javascript --- Ajax基础的更多相关文章

  1. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  2. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  3. 【javascript】ajax 基础

    什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...

  4. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  5. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  6. Ajax基础2

    什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...

  7. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  8. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  9. jQuery基础---Ajax基础教程(二)

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...

随机推荐

  1. PowerPoint 打开文档发现.pptx中胡内容有问题

    一.问题的提出 有一个文件,在window 7操作系统中通过邮箱地址保存到本地,结果打开的时候出现[PowerPoint 打开文档发现 文件.pptx中胡内容有问题] 然后提示[如果您信任此演示文稿的 ...

  2. PL/SQL异常

    CASE_NOT_FOUND CASE selector WHEN selector_value_1 THEN statements_1 WHEN selector_value_2 THEN stat ...

  3. Android不规则点击区域详解

    Android不规则点击区域详解 摘要 今天要和大家分享的是Android不规则点击区域,准确说是在视觉上不规则的图像点击响应区域分发. 其实这个问题比较简单,对于很多人来说根本不值得做为一篇博文写出 ...

  4. c/c++:重载 覆盖 隐藏 overload override overwrite

    http://www.cnblogs.com/qlee/archive/2011/07/04/2097055.html 成员函数的重载.覆盖与隐藏成员函数的重载.覆盖(override)与隐藏很容易混 ...

  5. [fun code - 模拟]孤独的“7”

    今天看到朋友圈里有人发了一张孤独的7的题目,第一反应就是模拟后计算出结果,而女朋友则更爱推理,手算.

  6. 【Software Clone】2014-IEEE-Towards a Big Data Curated Benchmark of Inter-Project Code Clones

    Abstract 大数据的克隆检测和搜索算法已经作为嵌入在应用中的一部分. 本文推出一个代码检测基准.包含一些已知的真假克隆代码.其中包括600万条真克隆(包含type-1,type-2,type-3 ...

  7. JavaScript备忘录(2)——闭包

    语句 JavaScript是解释型语言,解释器是按照顺序逐句执行的(除了进行一些少量预处理,如将函数声明提前). 顺序是由流程控制语句来控制的,常用的流程控制语句包括: 条件控制语句:if...els ...

  8. position 属性和 z-index 属性对页面节点层级影响的例子

    转:http://www.neoease.com/tutorials/z-index/ 不设 z-index 属性 单层节点 双层节点 多层节点

  9. STM32L051 PVD的调试

    我的PVD的驱动以及例程位于STM32L0xx_Drivers这个库当中,在使用前最好先阅读readme.md文件 PVD 是一种检测MCU供电情况的技术.当供电电压高于或者低于一定阈值的时候,可以在 ...

  10. 想从事分布式系统,计算,hadoop等方面,需要哪些基础,推荐哪些书籍?--转自知乎

    作者:廖君链接:https://www.zhihu.com/question/19868791/answer/88873783来源:知乎 分布式系统(Distributed System)资料 < ...