文档章节

如果不用jQuery,Ajax你还能写出多少?

顽Shi
 顽Shi
发布于 2014/03/18 10:45
字数 633
阅读 1587
收藏 53

    许久之前发过一篇关于Ajax的博客,通篇讲的都是通过jQuery编写Ajax,可能因为jQuery在这方面做的实在太好,以至于突然发现不用jQuery的话自己都模糊了Ajax的写法,这里重温一下.

    First - 我们明确在使用jQuery的Ajax忽略掉的问题,那就是Ajax的操作本身是操作一个XMLHttpRequest对象,所有的请求发送和监听都是围绕它进行的.

    在不同浏览器中,以及IE的不同浏览器版本下都会有不一样的Function创建这个对象,或者方法不同或者参数不同.

function CreateXHR() {
            var xhrobj = false;
            try {
                xhrobj = new ActiveXObject("Msxml2.XMLHTTP"); //ie msxml3.0+
            }
            catch (e) {
                try {
                    xhrobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml 2.6
                } catch (e2) {
                    xhrobj = false;
                }
            }
            if (!xhrobj && typeof XMLHttpRequest != 'undefined') { //firefox opera 8.0 safari
                xhrobj = new XMLHttpRequest();
            }
            return xhrobj;
        }
    为了最终创建出正确的XHR对象,不断用try-catch进行尝试.

    Second - 有了XHR对象,接下来我们调用XMLHttpRequest对象的各个方法就可以了,Ajax对于所谓的异步请求发送无外乎就是通过几个方法来进行的.

    我们这里是通过Javascript原生编写异步请求,但是其实并不复杂,只需要记住几个function就可以了.

//open,setRequestHeader,onreadystatechange,send

var xhr = CreateXHR();

//这里以POST方式发送,也可以是GET,参数不同即可.而且GET不需要设置setRequestHeader
xhr.open("POST", "demo.jsp", true);

//设置HTTP的输出内容类型为:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//设置浏览器不使用缓存,服务器不从缓存中找,重新执行代码,而且服务器返回给浏览器的时候,告诉浏览器也不要保存缓存。
xhr.setRequestHeader("If-Modified-Since", "0");
 
//设置回调函数
xhr.onreadystatechange = callback;  //callback是方法名
 
//发送请求
xhr.send(null); //GET方式
xhr.send("isAjax=1&na=123"); //POST方式
    这里就完成了请求发送,也定义了请求的回调是callback函数,所以最后我们的请求的结果就是在callback函数中.

    Third - 定义callback函数,Ajax的返回是有状态的,这里不同于jQuery的success,所以要自己判断状态码是否正确.

//回调函数
function callback() {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      var res = xhr.reponseText; //获得服务器返回的字符串
      console.log(res);
    }
  }
}
    这样就完成了通过原生Javascript发送Ajax请求.

© 著作权归作者所有

顽Shi
粉丝 275
博文 81
码字总数 92387
作品 0
普陀
程序员
私信 提问
加载中

评论(15)

m
msay
说白了, 学从难处学, 用从易处用.
哈哈__哈哈
哈哈__哈哈
我用dojo写过很简单的ajax
francis-x
francis-x
如果不用筷子,你该如何吃饭?
顽Shi
顽Shi

引用来自“范小伟”的评论

就是,如果不用筷子怎么吃饭,强烈建议直接用手吃。

确实通常情况下要用筷子吃...不过总不能不用筷子就饿死不是,所以要知道怎么用手吃,哈

首席段子手
首席段子手
就是,如果不用筷子怎么吃饭,强烈建议直接用手吃。
顽Shi
顽Shi

引用来自“东京热”的评论

动画,事件,怎么搞?

也可以通过原生的实现,不过DOM操作还是推荐用jQuery的,不然自己写很麻烦,虽然这么说有点矛盾。。。

东京热
东京热
动画,事件,怎么搞?
账号已注销_
账号已注销_
顶一个
东京热
东京热
把animate这块能做出来其他就不是事了。
摩云飞
摩云飞
拜读
jQuery零基础入门——(八)AJAX

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 用JavaScript写AJAX前面已经介绍...

JandenMa
2018/08/06
0
0
推荐分享 27 个 jQuery 表单插件

编者按:本文是一位20岁的孟买小伙子Shamuil分享的,他是一位自由职业设计师和Blogger。 在全球访问量最高的前1000个网站中,几乎没有不用jQuery的。如今jQuery的力量是无限强大。本文将向你...

jobBole
2011/03/28
1K
4
10 个支持列表无限滚动的 jQuery 插件

很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容。 下面为你推荐 10 个 jQuery 的无限滚动的插件...

oschina
2012/05/29
18.5K
11
动手编译自定义版本的最新 jQuery 类库?

日期:2012-9-21 来源:GBin1.com 你是不是觉得jQuery类库不够灵活,不像其它的框架或者类库,例如,dojo那样一样可以动态的加载模块,或者你在你的项目中没有使用jQuery提供的所有功能,比如...

gbin1
2012/09/24
2.6K
12
寻找jQuery中ajax方法的重载或别名的解决方法

jQuery中AJAX的方法有两种方式: 1、jQuery.ajax(); 2、$.ajax(); 问题:即不用jQuery,亦不使用$.ajax,而是通过扩展或重载方法来调用jQuery中的ajax方法 预期的调用效果:dwt.ajax() ;...

黄平俊
2010/01/28
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
9
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0
java并发图谱

1527
昨天
2
0
Mybatis之拦截器Interceptor

使用mybatis时用PageHelper进行分页,用到了PageInterceptor,借此了解下mybatis的interceptor。Mybatis的版本是3.4.6,MybatisHelper的版本是5.1.3。 1、PageInterceptor 先上一段代码,如下...

克虏伯
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部