一个简单Ajax类库及使用方法实例分析

本文实例讲述了一个简单Ajax类库及使用方法。分享给大家供大家参考,具体如下:

ajax.js

function Ajax(recvType){
  var aj=new Object();
  aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML
  aj.targetUrl='';
  aj.sendString='';
  aj.resultHandle=null;
  aj.createXMLHttpRequest=function(){
  var request=false;
  //window对象中有XMLHttpRequest存在就是非IE,包括(IE7,IE8)
  if(window.XMLHttpRequest){
    request=new XMLHttpRequest();
    if(request.overrideMimeType){
      request.overrideMimeType("text/xml");
    }
  //window对象中有ActiveXObject属性存在就是IE
  }else if(window.ActiveXObject){
    var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
    for(var i=0; i<versions.length; i++){
      try{
        request=new ActiveXObject(versions[i]);
        if(request){
          return request;
        }
      }catch(e){
        request=false;
      }
    }
  }
    return request;
  }
  aj.XMLHttpRequest=aj.createXMLHttpRequest();
  aj.processHandle=function(){
    if(aj.XMLHttpRequest.readyState == 4){
      if(aj.XMLHttpRequest.status == 200){
        if(aj.recvType=="HTML")
          aj.resultHandle(aj.XMLHttpRequest.responseText);
        else if(aj.recvType=="XML")
          aj.resultHandle(aj.XMLHttpRequest.responseXML);
      }
    }
  }
  aj.get=function(targetUrl, resultHandle){
    aj.targetUrl=targetUrl;
    if(resultHandle!=null){
      aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
      aj.resultHandle=resultHandle;
    }
    if(window.XMLHttpRequest){
      aj.XMLHttpRequest.open("get", aj.targetUrl);
      aj.XMLHttpRequest.send(null);
    }else{
      aj.XMLHttpRequest.open("get", aj.targetUrl, true);
      aj.XMLHttpRequest.send();
    }
  }
  aj.post=function(targetUrl, sendString, resultHandle){
    aj.targetUrl=targetUrl;
    if(typeof(sendString)=="object"){
      var str="";
      for(var pro in sendString){
        str+=pro+"="+sendString[pro]+"&";
      }
      aj.sendString=str.substr(0, str.length-1);
    }else{
      aj.sendString=sendString;
    }
    if(resultHandle!=null){
      aj.XMLHttpRequest.onreadystatechange=aj.processHandle;
      aj.resultHandle=resultHandle;
    }
    aj.XMLHttpRequest.open("post", targetUrl);
    aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    aj.XMLHttpRequest.send(aj.sendString);
  }
  return aj;
}

使用方法:

<script type="text/javascript">
  var ajax = Ajax(); // 实例化对象,默认为 HTTP,如果传入 XML,返回 XML 对象
  // Ajax 的 get 方法使用说明
  /**
  * function(targetUrl, resultHandle)
  * @param string targetUrl 传递过去的 URL 地址
  * @param string resultHandle 回调函数,可选项
  */
  ajax.get('test.php?name=liruxing&email=liruxing1715@sina.com', function(data) {
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  });
  // Ajax 的 post 方法使用说明
  /**
  * function(targetUrl, sendString, resultHandle)
  * @param string targetUrl 传递过去的 URL 地址
  * @param string sendString 参数值
  * @param string resultHandle 回调函数,可选项
  */
  ajax.post('test.php', 'name=liruxing&email=liruxing1715@sina.com', function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
  // post 第二种格式,第二个参数为 Json 格式
  ajax.post('test.php', {name:'李茹星',email:'liruxing1715@sina.com'}, function(data){
    eval("var obj="+data);
    alert(obj.name);
    alert(obj.email);
  })
</script>

更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》和《asp.net ajax技巧总结专题》

希望本文所述对大家ajax程序设计有所帮助。

(0)

相关推荐

  • AJAX和JSP混合使用方法实例

    首先要知道AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分

  • asp.net下ajax.ajaxMethod使用方法

    使用AjaxMethod要满足一下几点: 1.如果还没有ajax.dll文件,就先下载一个来 2.将ajax.dll添加到项目引用中:在VS的解决方案资源管理器中右键点击项目名称--"添加项目引用"--浏览,找到ajax.dll确定 3.webCofig中<httpHandlers>加上<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFacto

  • 微软ajax库的使用方法(ajax.ajaxMethod)

    用ajax.ajaxMethod需要做四件事 1:webCofig中 <httpHandlers>加上 <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>接点 2:在CS程序中加上 复制代码 代码如下: protected void Page_Load(object sender, EventArgs e)    { 

  • jquery ajax abort()的使用方法

    由于使用的是jquery,挡在手册里没有找到关于.abort()方法,在网上搜索了一下,在http://ooxx.me/jquery-ajax-abort.orz看到有关于jquery 里.abort()使用方法,直接用例子: 复制代码 代码如下: current_request = $.get('/events', { '七夕': '发春' },function(resp) { alert(resp); }); if(current_request) {current_request.abor

  • Jquery AJAX 框架的使用方法

    刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了.暂时就放弃了.后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程. 激起我客户端编程的兴趣,才想起学习一下了 Jquery.随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写

  • Ajax并不神秘:揭下各种Ajax控件和类库的小裤衩

    Ajax控件和类库现在真的太多了,不知不觉中增加了Ajax的神秘性和复杂性,看到版内很多人为此费解和伤神,决定发此贴谈谈本人对Ajax的观点,希望能让大家对Ajax有一个本质的认识. 观点一:Ajax和服务器端技术毫不相关 严格的说,与传统web开发相比,Ajax是完完全全的客户端技术.由于很多控件封装了客户端和服务器端的通信过程,因此很多问题也因通信而起.事实上,不论何种Ajax技术,服务器端都是返回的一个纯文本流,再由客户端来处理这个文本.这段文本可以是xml格式,也可以是一个Html片段,

  • 一个简单Ajax类库及使用方法实例分析

    本文实例讲述了一个简单Ajax类库及使用方法.分享给大家供大家参考,具体如下: ajax.js function Ajax(recvType){ var aj=new Object(); aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML aj.targetUrl=''; aj.sendString=''; aj.resultHandle=null; aj.createXMLHttpRequest=function(

  • ajax级联菜单实现方法实例分析

    本文实例讲述了ajax级联菜单实现方法.分享给大家供大家参考,具体如下: 效果如下: 选择第一项,第二项.第三项的内容跟着改变. 选择第二项,第三项的内容跟着改变. 第三项则不影响第一项和第二项. 有几点值得提: 1.html到底是前台拼接还是后台拼接. 我选择的是前台拼接,这样可以节省流量,和后台的资源.这也比较符合程序处理,一般后台只负责提供数据. 通过json传递给前台,完了前台获取进行处理. ajax函数 function ajaxgetbigclass(val){ $.ajax({ t

  • Springmvc ajax跨域请求处理方法实例详解

    上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha

  • 一个简单的php MVC留言本实例代码(必看篇)

    摘要 标题上我把这个留言板叫最简单的,其实应该叫最简陋的,因为把全部注意力集中在MVC模式设计和实现上,所以UI方面几乎没有一点修饰. 这个小程序一共包含6个文件,其中index.php是程序入口.post.htm是留言表单.在lib文件夹里Model.View .Controller三个文件分别实现MVC,DataAccess是一个简单的数据库访问类.其实这个程序是国外的一个人写的. PHP代码: /** * 一个用来访问MySQL的类 * 仅仅实现演示所需的基本功能,没有容错等 * 代码未作

  • 从vue基础开始创建一个简单的增删改查的实例代码(推荐)

    1.安装vue-cli    cnpm install vue-cli -g  --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目的目录结构及说明 build是webpack配置 build.js       // 生产环境构建代码 check-versions.js // 检查node&npm等版本 utils.js          // 构建配置公用工具 vue-loader.conf.js // vue加载器

  • 使用express搭建一个简单的查询服务器的方法

    本文介绍了使用express搭建一个简单的查询服务器的方法,分享给大家,具体如下: 使用到的技术栈有express.mysql. 项目结构: service --node_modules --app.js --query.js app.js支持调用服务,使用body-parser对request进行处理. query.js实现链接数据库以及查询数据库的功能. app.js代码如下: var express = require('express'); var query = require('./

  • 原生js基于canvas实现一个简单的前端截图工具代码实例

    这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先看效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{

  • Node使用koa2实现一个简单JWT鉴权的方法

    JWT 简介 什么是 JWT 全称 JSON Web Token , 是目前最流行的跨域认证解决方案.基本的实现是服务端认证后,生成一个 JSON 对象,发回给用户.用户与服务端通信的时候,都要发回这个 JSON 对象. 该 JSON 类似如下: { "姓名": "张三", "角色": "管理员", "到期时间": "2018年7月1日0点0分" } 为什么需要 JWT 先看下一般的认证

  • ThinkPHP防止重复提交表单的方法实例分析

    本文实例总结分析了ThinkPHP防止重复提交表单的方法.分享给大家供大家参考,具体如下: 为什么会有表单重复的坑 在开发中,如果一个新增或修改的表单,在后台完成数据库操作后我们设定的不是跳转到其他页面,还是返回本页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交,即这条记录会被增加或修改两次. 导致表单重复提交的原因是:第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其他页面时才消失.在自调用返回时,内存中的数据依然在,这时页面中的判断提交的代码依然可以检

随机推荐