1. // 使用原生js 封装ajax
  2. // 兼容xhr对象
  3. function createXHR(){
  4. if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
  5. return new XMLHttpRequest();
  6. }else if(typeof ActiveXObject != "undefined"){ // IE6浏览器
  7. var version = [
  8. "MSXML2.XMLHttp.6.0",
  9. "MSXML2.XMLHttp.3.0",
  10. "MSXML2.XMLHttp",
  11. ];
  12. for(var i = 0; i < version.length; i++){
  13. try{
  14. return new ActiveXObject(version[i]);
  15. }catch(e){
  16. //跳过
  17. }
  18. }
  19. }else{
  20. throw new Error("您的系统或浏览器不支持XHR对象!");
  21. }
  22. }
  23. // 转义字符
  24. function params(data){
  25. var arr = [];
  26. for(var i in data){
  27. arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
  28. }
  29. return arr.join("&");
  30. }
  31. // 封装ajax
  32. function ga_ajax(obj){
  33. var xhr = createXHR();
  34. obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
  35. obj.data = params(obj.data); // 转义字符串
  36. if(obj.method === "get"){ // 判断使用的是否是get方式发送
  37. obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
  38. }
  39. // 异步
  40. if(obj.async === true){
  41. // 异步的时候需要触发onreadystatechange事件
  42. xhr.onreadystatechange = function(){
  43. // 执行完成
  44. if(xhr.readyState == 4){
  45. callBack();
  46. }
  47. }
  48. }
  49. xhr.open(obj.method,obj.url,obj.async); // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
  50. if(obj.method === "post"){
  51. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  52. xhr.send(obj.data);
  53. }else{
  54. xhr.send(null);
  55. }
  56. // xhr.abort(); // 取消异步请求
  57. // 同步
  58. if(obj.async === false){
  59. callBack();
  60. }
  61. // 返回数据
  62. function callBack(){
  63. // 判断是否返回正确
  64. if(xhr.status == 200){
  65. obj.success(xhr.responseText);
  66. }else{
  67. obj.Error("获取数据失败,错误代号为:"+xhr.status+"错误信息为:"+xhr.statusText);
  68. }
  69. }
  70. }
  71.  
  72. var html = document.getElementsByTagName("html")[0];
  73. html.onclick = function(){
  74. ga_ajax({
  75. "method" : "post",
  76. "url" : "dem0o.php",
  77. "data" : {
  78. "name" : "gaga",
  79. "age" : 10000000,
  80. "num" : "12346&598"
  81. },
  82. "success" : function(data){
  83. alert(data);
  84. },
  85. "Error" : function(text){
  86. alert(text);
  87. },
  88. "async" : false
  89. });
  90. }

使用原生js写ajax的更多相关文章

  1. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  2. 原生JS写Ajax的请求函数

    一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  3. 原生js写ajax请求(复习)

    今天本地想测试一个接口,不想用框架想用js快速完成,突然发现,我居然忘了这个最基本的代码.好吧,只能复习一波. 在框架泛滥的今天,用惯$.ajax(),axios,superAgent等框架的你们,还 ...

  4. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  5. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

  6. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  7. 原生js中用Ajax进行get传参

    原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  8. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  9. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

随机推荐

  1. magento安装以及搬家的注意事项

    如果你的空间可以用ssh的话,你可以在官网的wiki Moving Magento To Another Server 中看到较为详细的搬家过程. 无论你的服务器是linux系统还是windows系统 ...

  2. ButterKnife View 注入

    /***************************************************************************************** * ButterK ...

  3. com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure 数据库报错

    -- 查询mysql 数据库链接空闲时间持有最大空闲时间,单位为秒 SHOW VARIABLES WHERE VAriable_name = 'interactive_timeout'; -- 会出现 ...

  4. PAT (Basic Level) Practise:1002. 写出这个数

    [题目链接] 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式:在一行内输出n的各 ...

  5. 简单的将内容加入到drupal的主页面

    首先要管理员用户 然后进入结构目录 进入菜单项 在main行 选择 列出list 选择添加链接 完善信息 保存即可 eg: http://peach.fafu.edu.cn/ 将papaya的jbro ...

  6. CMOS、BIOS

    CMOS主要的功能为记录主板上面的主要参数,包括系统时间.CPU电压与频率.各项设备的I/O地址与IRQ等,由于这些数据的记录要花费电力,因此主板上面才有电池. BIOS为写入到主板上某一块闪存或EE ...

  7. centos 服务器操作

     CENTOS下创建FTP登录用户 yum install vsftpd2.启动/重启/关闭vsftpd服务器[root@localhost ftp]# /sbin/service vsftpd re ...

  8. ZSDR017-客户订货价格和库存

    *----------------------------------------------------------------------*ZSDR017-客户订货价格和库存*---------- ...

  9. 比较compareTo与equals及==的区别

    1.compareTo: 附上:源码: public int compareTo(String anotherString) {         int len1 = value.length;   ...

  10. Win+R运行自定义程序应该这样玩

    互联网是一个“生态圈”,Windows有自己的生态学,有些看似高效的“奇技淫巧”实则只是搞笑. 我很以前十分崇拜善用佳软的站长,对事不对人,有些弊端,只是我们不知道,但并不代表就没有. 有些“恍然大悟 ...