许久之前发过一篇关于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请求.

最新文章

  1. Python DES 加密解密，就是大家所谓想要的那个非常快速的方法
  2. SQLAlchemy模型使用
  3. phpweb成品网站最新版(注入、上传、写shell)
  4. POJ 2492 并查集扩展（判断同性恋问题）
  5. codeacademy
  6. A linked list is given such that each node contains an additional random pointer which could point to any node in the list or null. Return a deep copy of the list.
  7. [转载]MongoDB C# 驱动教程
  8. java时间格式大全
  9. Java基础知识强化之IO流笔记17：FileOutputStream构造方法使用
  10. .NET中使用GridView控件输入数据时出现“ Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index"的问题
  11. Activiti 5.16用户手册
  12. Struts2 注解零配置方法（convention插件使用）
  13. NodeJS中的http模块
  14. go语言学习-常用命令（四）
  15. <五>企业级开源仓库nexus3实战应用–使用nexus3配置npm私有仓库
  16. angular4 使用swiper 首次加载问题（一）
  17. maven项目 报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
  18. nginx 启动报错403
  19. 在TensorFlow中运行程序多次报错：AttributeError: __exit__
  20. 阿里云Linux服务器挂载数据盘

热门文章

  1. key Value
  2. CSS基础-DAY1
  3. Highmaps网页图表教程之图表配置项结构与商业授权
  4. python数据分析之csv/txt数据的导入和保存
  5. python io 模块之 open() 方法(好久没写博客了)
  6. python中%r和%s的区别
  7. [ 原创 ]Centos 7.0下安装 Tomcat8.5.15
  8. ARM 常用汇编指令
  9. [BZOJ5298][CQOI2018]交错序列(DP+矩阵乘法)
  10. 20162325 金立清 S2 W10 C19