XMLHttpRequest 对象用于和服务器交换数据。我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

open(method,url,async)

method:请求的类型;GET 或 POST

url:文件在服务器上的位置

async:true(异步)或 false(同步)

send(string)

string:仅用于 POST 请求

注:如果需要像 HTML 表单那样 POST 数据,需设置 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中规定您希望发送的数据:XMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");示例如下代码58行所示。

  1. var Factory = {
  2. create: function() {
  3. return function() { this.init.apply(this, arguments); }
  4. }
  5. }
  6.  
  7. var Ajax = Factory.create();
  8.  
  9. Ajax.prototype = {
  10. init: function (successCallback, failureCallback) {
  11. this.xhr = this.createXMLHttpRequest();
  12. var xhrTemp = this.xhr;
  13. var successFunc = null;
  14. var failFunc = null;
  15.  
  16. if (successCallback != null && typeof successCallback == "function") {
  17. successFunc = successCallback;
  18. }
  19.  
  20. if (failureCallback != null && typeof failureCallback == "function") {
  21. failFunc = failureCallback;
  22. }
  23.  
  24. this.get.apply(this, arguments);
  25. this.post.apply(this, arguments);
  26.  
  27. this.xhr.onreadystatechange = function () {
  28. if (xhrTemp.readyState == ) {
  29. if (xhrTemp.status == ) {
  30. if (successFunc != null) {
  31. successFunc(xhrTemp.responseText, xhrTemp.responseXML);
  32. }
  33. }
  34. else {
  35. if (failFunc != null) {
  36. failFunc(xhrTemp.status);
  37. }
  38. }
  39. }
  40. }
  41. },
  42. get: function (url, async) {
  43. this.xhr.open("GET", url, async);
  44. this.xhr.send();
  45. },
  46. createXMLHttpRequest: function () {
  47. if (window.XMLHttpRequest) {
  48. return new XMLHttpRequest();
  49. }
  50. else {
  51. return new ActiveXObject("Microsoft.XMLHTTP");
  52. }
  53.  
  54. throw new Error("Ajax is not supported by the browser!");
  55. },
  56. post: function (url, data, async) {
  57. this.xhr.open("POST", url, async);
  58. this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  59. this.xhr.send(data);
  60. },
  61. random: function (length) {
  62. var array = new Array("", "", "", "", "", "", "", "", "");
  63. var len = parseInt(length);
  64. var key = "";
  65.  
  66. for (var i = ; i < len; i++) {
  67. key += Math.floor(Math.random() * );
  68. }
  69.  
  70. return key;
  71. }
  72. }

对于GET与POST方法使用如下:

  1. function get() {
  2. var ajax = new Ajax(success,fail);
  3. ajax.get("Scripts/Util.js", true);
  4. }
  5.  
  6. function post() {
  7. var ajax = new Ajax(success, fail);
  8. ajax.post("AjaxService.asmx/GetArgs","name=jasen", true);
  9. }
  10.  
  11. function success(responseText, responseXML) {
  12. alert("result:" + responseText);
  13. }
  14.  
  15. function fail(status) {
  16. alert("status:" + status);
  17. }

以上仅为练习随笔,仅供参考....

原生Ajax封装随笔的更多相关文章

  1. 原生ajax封装,包含post、method方式

    原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new ...

  2. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  3. 原生ajax封装及用法

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

  4. 原生AJAX封装

    var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function () { //声明异步对象变量 var xmlHttp = false; //声 ...

  5. 原生ajax封装,数据初始化,

    var ajaxTool = { setting : { method : 'get', url : location.href, data : '', callback : function(){a ...

  6. 原生js封装ajax:传json,str,excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  9. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

随机推荐

  1. python迭代器和生成器

    迭代器 #可以被netxt()函数调用不断返回一个值的对象成为迭代器:Iterator #迭代器是访问集合元素的一种方式,从集合第一个元素开始(用next()方法)访问就不能回退,便于循环遍历一些较大 ...

  2. 细说;(function ($, undefined){ })(jQuery); 的使用

    1. 对于function前面的分号(;)的使用:使用分号的目的是为了防止多个文件压缩合并时,以为其他文件最后一行语句没加分号,而引起合并后的语法错误. 2. (function ($, undefi ...

  3. tmp

    Hello 大家好,这次给大家带来的是Gear VR4代,首先我得感谢下我们的虎友Hide兄弟友情提供Gear给我们测评,感谢 感谢.之前我录的前哨战也说过,这次Gear VR 4代较3代变化并不是很 ...

  4. Faster-RCNN 解析

    http://blog.csdn.net/xzzppp/article/details/52317863 包含faster-rcnn源码和对应的训练测试相关的知识点解析

  5. aa5

    var placeList = [ {name:'海门', geoCoord:[121.15, 31.89]}, {name:'鄂尔多斯', geoCoord:[109.781327, 39.6082 ...

  6. js设置本周 本月 本年

    var SetSearchDate = function (sign, sid, eid) {//sign 标识符区分本周本月本年,sid开始时间id,eid结束时间id var now = new ...

  7. JSP知识

    五.JSP概述及最佳实践1.更改MyEclipse生成的JSP模板.模板文件与Servlet.java(Servlet模板文件)很近.2.学好JSP的关键:JSP就是Servlet.一定要记住JSP中 ...

  8. [django]用requests从url获取图片(数据类型是bytes)后如何在template中显示出来

    今天在做一个注册页面的时候遇到了一个验证码图片在页面显示的问题. 我用requests从一个url上获取到一张图片, 没有保存到本地, 而是想直接作为render的字典参数,传到页面里进行渲染.因为r ...

  9. SSMS错误:A connection was successfully established with the server, but then an error occurred during the login process

    参考: 系统太慢,实在搞不清是哪里的问题,祭出重装大法 需要安装的工具还真多,先装主要的吧.VS2013, SQL SERVER 2012,搞定.. 连个数据库试试,出错了: A connection ...

  10. python脚本执行Scapy出现IPv6警告WARNING解决办法

    安装完scapy,写了脚本执行后执行: WARNING: No route found for IPv6 destination :: (no default route?) 原因是用 from sc ...