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

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

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

01 function CreateXHR() {
02             var xhrobj = false;
03             try {
04                 xhrobj = new ActiveXObject("Msxml2.XMLHTTP"); //ie msxml3.0+
05             }
06             catch (e) {
07                 try {
08                     xhrobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml 2.6
09                 catch (e2) {
10                     xhrobj = false;
11                 }
12             }
13             if (!xhrobj && typeof XMLHttpRequest != 'undefined') { //firefox opera 8.0 safari
14                 xhrobj = new XMLHttpRequest();
15             }
16             return xhrobj;
17         }

为了最终创建出正确的XHR对象,不断用try-catch进行尝试.

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

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

01 //open,setRequestHeader,onreadystatechange,send
02  
03 var xhr = CreateXHR();
04  
05 //这里以POST方式发送,也可以是GET,参数不同即可.而且GET不需要设置setRequestHeader
06 xhr.open("POST""demo.jsp"true);
07  
08 //设置HTTP的输出内容类型为:application/x-www-form-urlencoded
09 xhr.setRequestHeader("Content-Type""application/x-www-form-urlencoded");
10  
11 //设置浏览器不使用缓存,服务器不从缓存中找,重新执行代码,而且服务器返回给浏览器的时候,告诉浏览器也不要保存缓存。
12 xhr.setRequestHeader("If-Modified-Since""0");
13   
14 //设置回调函数
15 xhr.onreadystatechange = callback;  //callback是方法名
16   
17 //发送请求
18 xhr.send(null); //GET方式
19 xhr.send("isAjax=1&na=123"); //POST方式

这里就完成了请求发送,也定义了请求的回调是callback函数,所以最后我们的请求的结果就是在callback函数中.

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

1 //回调函数
2 function callback() {
3   if (xhr.readyState == 4) {
4     if (xhr.status == 200) {
5       var res = xhr.reponseText; //获得服务器返回的字符串
6       console.log(res);
7     }
8   }
9 }

这样就完成了通过原生Javascript发送Ajax请求.

如果不用jQuery,Ajax你还能写出多少?的更多相关文章

  1. jquery ajax 总是还未等到success回调就刷掉了,就进入了onError函数的错误案例分析

    jquery ajax 总是还未等到success回调就刷掉了,就进入了onError函数的错误案例分析: 同样的请求同时请求了2次,然后第二次的请求把第一次的给刷掉了! (比如:<div on ...

  2. jquery ajax常用的登录登出

    整理jquery+ajax的登录登出方法. //登录 var currentUserId = -1; $(function() { var timestamp = (new Date()).value ...

  3. Jquery+Ajax+asp.net+sqlserver-编写的通用邮件管理(源码)

    开始 邮件管理通常用在各个内部系统中,为了方便快捷的使用现有的代码开发一个邮件管理系统而诞生的. 准备条件 这是我的设计表结构,大家一看就懂了   --邮件接收表CREATE TABLE [dbo]. ...

  4. Jquery+Ajax+asp.net+sqlserver-编写的通用邮件管理(有源码)

    开始 邮件管理通常用在各个内部系统中,为了方便快捷的使用现有的代码开发一个邮件管理系统而诞生的. 准备条件 这是我的设计表结构,大家一看就懂了 --邮件接收表CREATE TABLE [dbo].[T ...

  5. Swing:LookAndFeel 教程第一篇——手把手教你写出自己的 LookAndFeel

    本文是 LookAndFeel 系列教程的第一篇. 是我在对 Swing 学习摸索中的一些微薄经验. 我相信,细致看全然系列之后.你就能写出自己的 LookAndFeel. 你会发现 Swing 原来 ...

  6. 只用这 6 个字符,就可以写出任意 JavaScript 代码!

    你可能在网上见过有人用 几个不同的字符写的各种稀奇古怪的 JavaScript 代码,虽然看起来奇怪,但是能正常运行!比如这个: (!(~+[])+{})[--[~+""][+[] ...

  7. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  8. Jquery ajax, Axios, Fetch区别之我见(转载)

    来源:https://segmentfault.com/a/1190000012836882 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被 ...

  9. WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

随机推荐

  1. 【*】Redis常见问题汇总

    1.什么是Redis? Redis是一个开源.高性能.基于键值对的缓存与存储系统. 2.Redis相比memcached有哪些优势? 劣势:Redis是单线程,Memcached是多线程,在多核服务器 ...

  2. django数据库操作-增删改查-多对多关系以及一对多(外键)关系

    一.一对多(外键) 例子:一个作者对应多本书,一本书只有一个作者 model代码: class Person(models.Model); name = models.CharField('作者姓名' ...

  3. python opencv3 cornerHarris 角点检测

    git:https://github.com/linyi0604/Computer-Vision 角点也是处在一个无论框框往哪边移动 框框内像素值都会变化很大的情况而定下来的点 如果框框水平方向上移动 ...

  4. luoguP1659 [国际集训队]拉拉队排练 manacher算法

    直接统计长度为$i$的回文子串有多少个 然后倒叙枚举长度,快速幂统计一下即可 复杂度$O(n \log n)$ #include <cstdio> #include <cstring ...

  5. Mistakes(Updating)

    1.当调试时发现无法正常调用函数时,检查是否发生爆栈 对于每个栈仅有4MB的空间,开int只能开大约5*10^5. 大数组一定要开全局变量 2.当long long=int*int时会爆int,一定要 ...

  6. hdu 1026 bfs+记录路径

    题意:从0,0点出发到n-1,m-1点,路上的数字代表要在这个点额外待多少秒,求最短的路 递归输出路径即可 #include<cstdio> #include<iostream> ...

  7. Android中利用ant进行多渠道循环批量打包

    公司负责Android开发的小伙伴学习能力稍微偏弱,交代给他的自动化打包的任务,弄了好久依然没有成效.无奈只好亲自出手. 没有想到过程很顺利,我完全按照如下文章的步骤进行: 主要参考: Android ...

  8. python 加密方式(MD5&sha&hashlib)

    1.MD5加密 import md5 m = md5.new() #或者m = md5.md5() m.update('123456') m.hexdigest() #或者md5.md5('12345 ...

  9. Codeforces Round #353 (Div. 2) C. Money Transfers 数学

    C. Money Transfers 题目连接: http://www.codeforces.com/contest/675/problem/C Description There are n ban ...

  10. 使用postMessage进行react和iframe的数据通信.md

    将react的数据传递给iframe 1.首先在父组件(react文件)内引入iframe <iframe style={{border:0,width:"100%",hei ...