AJAX封装类使用指南

AJAX说起来感觉很难，但是把他封装起来你会发现使用起来很简单了，当然也是简单的应用了，譬如留言板的应用等，这里首先，先送大家一个礼物那就是封装好的AJAX的类，下载地址http://xiazai.jb51.net/201412/yuanma/ajax3.0(jb51.net).rar 这里下载这个类，然后教大家怎么使用吧！
实例哦！

代码如下:

<html>
 <head>
  <title>Ajax实例</title>
  <script src="ajax3.0.js"></script>
 </head> 
 <body>
  <script>
   document.write(new Date()+"<br>");
   document.write(new Date()+"<br>");
   document.write(new Date()+"<br>");
  </script> 
  <div id="show" style="background:yellow;border:1px solid blue">
   内容加载中..... 
  </div>
  <script>
   function read() {
    Ajax().get("read.php?num="+Math.random(), function(data){
     document.getElementById("show").innerHTML=data;   
    }) 
   }
   read();
   setInerval("read()",3000);
   function send() {
    var username=document.frm.username;
    var desn=document.frm.desn;
    var datao = {username:username.value, desn:desn.value};
    Ajax().post("save.php", datao, function(data){
      
      read();
      username.value="";
      desn.value="";
    });
   }
  </script>
  <form name="frm">
   用户名:<input type="text" name="username" value=""><br>
   内容: <textarea cols="40" rows="5" name="desn"></textarea>
   <input type="button" onclick="send()" value="留言">
  </form>
  <script>
   document.write(new Date()+"<br>");
   document.write(new Date()+"<br>");
   document.write(new Date()+"<br>");
  </script>
 </body>
</html>

首先先加入我们的ajax3.0.js这个文件，然后我们就写这个东西Ajax().post("save.php", datao, function(data))
ajax()两个参数 第一个返回xml json 还是html 第二个true异步传输 false同步传输 post后边大家看的明白吧 呵呵
下边是 php的文件

代码如下:

//read.php
 @readfile("demo.txt");
//save.php
// header("Content-Type:text/html;charset=gb2312")
 $username=$_POST["username"];
 $desn = $_POST["desn"];

$fh = fopen("demo.txt", "a");

$text=$username."--".date("Y-m-d H:i:s")."说:".$desn."<br>";

fwrite($fh, $text);

fclose($fh);
//demo.text
fdsafdsa--2012-11-01 12:24:04说:fdsafdsa<br>fdsafdsa--2012-11-01 12:24:07说:fdsafdsafsa<br>111--2012-11-01 12:25:07说:2222<br>eeee--2012-11-01 12:25:10说:eeee<br>fdsfds--2012-11-01 12:25:12说:fdsfdsfds<br>fdsfds--2012-11-01 12:25:19说:fdsfdsfs<br>fdsfdsf--2012-11-01 12:25:22说:sfdsfdsfds<br>fdsafdsa--2012-11-01 12:26:00说:fdsafdsa<br>

嗯 今天有点事 ，写的可能不够详细，有什么不懂的，请大家留言，

赞 (0)

相关推荐

  • JavaScript 封装Ajax传递的数据代码

    复制代码 代码如下: var paramBeanList = new Array(); Array.prototype.addParamBean=function(paramBeanObj){     var index = this.containParamBean(paramBeanObj);     if (index != -1) {         this[index] = paramBeanObj;     } else {         this.push(paramBeanO

  • 对Jquery中的ajax再封装,简化操作示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>jQueryAja

  • 自己动手封装的 ajax

    以前开发用了很多AJAX的技术比如EXT,prototype,jQuery等等,但都是开源封装好的AJAX框架.从没真正用过纯正的AJAX,故参照prototyp面向对象思想自己封装了一个AJAX框架.希望能给读者参考.帮助.评价. 复制代码 代码如下: /* * 自己封装的ajax * * * @author 姜松 * @version 1.00 $date:2009-07-02 * * history: * */ Object.extend = function(destination, s

  • 一个封装的Ajax类

    用法:  new Ajax().Request(url,cmd,async,method,postString,title)  参数:  url: 请求页面URL(必填)  cmd: 返回值处理函数(必填)  async: 是否异步 ,(ture|false), 默认true  method: 请求方式,(post|get), 默认get  postString: 请求方式为post时,请求内容  title: 请求内容标题  复制代码 代码如下: // Ajax 封装 2007-3-13 fu

  • 使用对象封装ajax重复调用的方法

    在项目中经常用到AJAX调用远程数据,每一次调用,都得写一个ajax方法,这就造成了重复代码过多,可读性也不够强,所以,我一般都是封装起来,需要的时候调用. var imgUpload = { //ajax请求数据 method:function(murl,mdata,method,success){ $.ajax({ type: method, url: murl, dataType : "jsonp", data: mdata, timeout: 20000, error: fun

  • 原生Javascript封装的一个AJAX函数分享

    最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的--但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequ

  • 一个AJAX自动完成功能的js封装源码[支持中文]第1/2页

    Screenshots screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/u

  • ajax的工作原理以及异步请求的封装介绍

    Ajax原理: 客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求,当服务器返回响应时,会调用先前注册的回调函数,在回调函数中可以使用javascript操作DOM来更新页面,异步请求不会阻塞客户端的操作,达到页面无法刷新就可以更新数据的效果. 异步请求的封装: 复制代码 代码如下: var xhr=false; //step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象 if (window.XMLHttpRequest) { //IE7+, Firefox

  • AJAX封装类使用指南

    AJAX说起来感觉很难,但是把他封装起来你会发现使用起来很简单了,当然也是简单的应用了,譬如留言板的应用等,这里首先,先送大家一个礼物那就是封装好的AJAX的类,下载地址http://xiazai.jb51.net/201412/yuanma/ajax3.0(jb51.net).rar 这里下载这个类,然后教大家怎么使用吧! 实例哦! 复制代码 代码如下: <html>  <head>   <title>Ajax实例</title>   <script

  • jQuery Ajax()方法使用指南

    jQuery提供了简单而强大的选择器功能,同时对Ajax操作也给出了很好的支持.在Ajax方面,jQuery除了提供底层的jQuery.ajax()方法外,也提供了下面的简单方法: (1)       jQuery.get(url, [data], [callback], [type]) (2)       jQuery.getJSON(url, [data], [callback]) (3)       jQuery.getScript(url, [callback]) (4)       j

  • jquery Ajax 全局调用封装实例详解

    前言: 有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquer

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • 浅析jQuery Ajax通用js封装

    本文大概分为三步实现jquery ajax通过js封装,通过代码实例讲解,代码附有注释,比较容易理解,具体详情如下所示: 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了 /******************

  • 提升jQuery的性能需要做好七件事

    做好七件事帮你提升jQuery的性能,想知道哪几件事情吗? 1. Append Outside of Loops 凡是触及到DOM都是有代价的.如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行.当在循环当中附加元素就会产生一个常见的问题. $.each( myArray, function( i, item ) { var newListItem = "<li>" + item + "</li>"; $( &

  • Google 爬虫如何抓取 JavaScript 的内容

    Google 爬虫如何抓取 JavaScript 的内容

    我们测试了谷歌爬虫是如何抓取 JavaScript,下面就是我们从中学习到的知识. 认为 Google 不能处理 JavaScript ?再想想吧.Audette Audette 分享了一系列测试结果,他和他同事测试了什么类型的 JavaScript 功能会被 Google 抓取和收录. 长话短说 1. 我们进行了一系列测试,已证实 Google 能以多种方式执行和收录 JavaScript.我们也确认 Google 能渲染整个页面并读取 DOM,由此能收录动态生成的内容. 2. DOM 中的

  • 做好七件事帮你提升jQuery的性能

    1. Append Outside of Loops 凡是触及到DOM都是有代价的.如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行.当在循环当中附加元素就会产生一个常见的问题. 复制代码 代码如下: $.each( myArray, function( i, item ) {    var newListItem = "<li>" + item + "</li>";    $( "#ballers

  • 在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)

    下面小编给大家整理了8个技巧对程序员来说非常的有帮助,具体如下所示: 1) 禁用鼠标右键单击 jQuery程序员可以使用此代码在网页上禁用鼠标右键点击. $(document).ready(function() { //catch the right-click context menu $(document).bind("contextmenu",function(e) { //warning prompt - optional alert("No right-clicki

  • Prototype使用指南之ajax

    Prototype中的ajax.js提供了一个非常好用的ajax框架,一般应用中简单的调用以下代码就可以了 new Ajax.Request(    url, {method: "get",    onSuccess: showFilter,    onFailure: function(request){alert("Server error!")},    onException: showError}  ); 这个框架中提供了如下的对象和方法等: Ajax对象

随机推荐