神马是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. JavaScript ---属性

    获取属性 可以通过点(.)或方挂号([])运算符来获取属性的值. 对于点(.)来说,右侧必须是一个以属性名称命名的简单标识符.对于[]来说,方挂号内必须是一个计算结果为字符串的表达式. var aut ...

  2. MFC下调用控制台和控制台下MFC库的支持

    1.MFC下调用控制台 在CWinApp的InitInstance中对话框的DoModal之前加入 AllocConsole(); // 开辟控制台 SetConsoleTitle(_T(" ...

  3. Using the Cordova Camera API

    使用ionic开发一款android或ios应用,估计少不了使用到Camera API,这里记录下使用过程. 创建空的ionic应用 ionic start myTabs tabs 通过cd demo ...

  4. js常见怪异

    1.隐式转换为布尔:"truthy"和"falsy" 当 JavaScript 需要一个布尔值时(例如:if 语句),任何值都可以被使用. 最终这些值将被转换为 ...

  5. VisualSFM for Structure from Motion

    VisualSFM是Changchang Wu编写的使用 Structure from Motion (SfM)进行3D重建的交互界面,具体内容详见http://homes.cs.washington ...

  6. IBM powerVM VIOS

    引言 随着信息化技术不断发展,各个企业 IT 基础架构也在不断朝向虚拟化,大数据,云计算等精简,整合的趋势发展.虚拟化技术就显得尤为重要.今天要给大家介绍的是 Power 服务器虚拟化技术中的一小部分 ...

  7. 让我们一起Go(十二)

    前言: 上篇中,我们讲到了在Go语言中如何定义方法,今天,我们将进一步深入Go语言的面向对象编程. 一.Go语言中的接口 首先来看一个最基本的接口: 和定义一个结构体类似,只不过将struct换成了i ...

  8. visual studio 2012 has stopped working

    I had similar problem which was resolved by taking two steps : 1A. DELETE THE REGISTRY KEY : 32-bit ...

  9. 基于HTML5技术的电力3D监控应用(四)

    回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己 ...

  10. [ORM] Entity Framework(2) CodeFirst进阶

    在上一节中,实现了CodeFirst快速入门.但是很多与数据库的细节还无法自定义.以及使用EF过程中,需要注意的事项. 在本节中,会涉及到以下 EF中的连接字符串 EF的对象状态 延迟加载,为什么需要 ...