<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
 $(function() {
  // load方法：向服务器发送异步请求，并且将服务器返回的数据直接添加到符合要求的节点之上。
  $('#btn1').click(function() {
   // load方法如果没有请求参数，会发送get请求，如果有请求参数，则会发送post请求。当不需要传参的时候，发送get请求就方便了。
   // 也可以这样的参数形式：name=llj&age=55
   $('#tips').load('/ace/ajax.servlet', {
    username : $('#username').val()
   });
  });

// $.get()方法
  $('#btn2').click(function() {
   $.get('/ace/ajax.servlet', {
    username : $('#username').val()
   }, function(data, statusText) {
    $('#tips').html(data);
   }, 'text');
//     最后一个参数：服务器返回的数据类型，可以是:
//     text : 普通的文本
//     html :  html文档
//     json :   json字符串
//     xml :   xml文档
//     script: javascript脚本
  });

// $.post()方法
  $('#btn3').click(function() {
   $.post('/ace/ajax.servlet', {
    username : $('#username').val()
   }, function(data, statusText) {
    $('#tips').html(data);
   }, 'text');
  });

// $.ajax()方法
  $('#btn4').click(function() {
   $.ajax({
    url : '/ace/ajax.servlet', // js中，属性可以不用 ' '  JSON里面必须要 ' '
    type : 'get', // 默认是get方式
    data : 'username=' + $('#username').val(),
    dataType : 'text',
    success : function(data) {
     $('#tips').html(data);
    },
    error : function() {
     alert('ERROR!');
    },
    async : true // async: 当值为true(缺省值)，表示发送异步请求。当值为false,表示发送同步请求。
   });
  });

// $.getJSON
  $('#btn5').click(function() {
   $.getJSON('/ace/ajax.servlet?act=1', {}, function(data) {
    alert(data);
   });
  });

// $.ajax()方法对keyup事件的应用
  $('#username').keyup(function() {
   $.ajax({
    url : '/ace/ajax.servlet',
    type : 'get',
    data : 'username=' + $('#username').val(),
    dataType : 'text',
    success : function(data) {
     $('#tips').html(data);
    },
    error : function() {
     alert('ERROR!');
    },
    async : true
   });
  });

// $.ajax()方法对input(propertychange)事件的应用
  var event = 'input'; // 非IE浏览器 - input事件
  if (window.navigator.userAgent.indexOf('MSIE') != -1) {
   event = 'propertychange'; // IE浏览器 - propertychange事件
  }
  $('#username2').bind(event, fn);
  function fn() {
   $.ajax({
    url : '/ace/ajax.servlet',
    data : 'username=' + $('#username2').val(),
    success : function(data) {
     $('#tips').html(data);
    }
   });
  }

});
</script>
<script type="text/javascript">
 /**
  * 获取AJAX对象 <br>
  * AJAX：asynchronous javascript and xml <br>
  * ajax是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊的对象(XMLHttpRequest对象，<br>
  * 一般称之为ajax对象)异步地(当ajax对象发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作)向服务器发请求，<br>
  * 服务器送回部分数据( 并不是一个完整的页面)，利用这些数据更新当前页面。整个过程，页面无刷新，不打断用户的操作。<br>
  */
 function getXhr() {
  var xhr = null;
  if (window.XMLHttpRequest) {
   xhr = new XMLHttpRequest(); // 非IE浏览器
  } else {
   xhr = new ActiveXObject("Microsoft.XMLHttp"); // IE浏览器
  }
  return xhr;
 }

function xhrExample() {
  function post() {
   var xhr = getXhr();
   xhr.open('post', 'test.servlet', 'true');
   xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 消息头
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
     var txt = xhr.responseText;
    }
   };
   xhr.send("time=" + mf("timer").innerHTML);
  }

function get() {
   var xhr = getXhr();
   xhr.open('GET', 'test.servlet?actionMethod=GET', 'true');
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
     var txt = xhr.responseText;
    }
   };
   xhr.send(null);
  }
 }

/**
  * ajax提交表单的两种方法
  */
 function func1() {
  $.ajax({
   url : 'test.servlet',
   type : 'post',
   data : $('#form').serialize(),
   dataType : 'text',
   success : function(data) {
   },
   error : function() {
   }
  });
 }

// 需要jquery.form.js
 function func2() {
  var options = {
   url : 'test.servlet',
   type : 'post',
   data : null,
   success : function(data) {
   }
  };
  var form = $("#form");// form1:表单ID 在表单界面只用这一个表单ID
  form.ajaxSubmit(options);
 }
</script>
</head>
<body>
 <h3>jQuery对AJAX的支持演示 -- load、$.get()、$.post()、$.ajax()</h3>
 <form>
  用户名1： <input id="username" /> keyup事件 <span id="tips" style="font-size: 32pt; color: cyan;"></span>
  <br>
  <br>
  用户名2： <input id="username2" /> input(propertychange)事件
  <br>
  <br>
  <input type="button" value="click me(load)" id="btn1" />
  <input type="button" value="click me($get)" id="btn2" />
  <input type="button" value="click me($post)" id="btn3" />
  <input type="button" value="click me($.ajax)" id="btn4" />
  <input type="button" value="click me($.getJSON)" id="btn5" />
  <br>
 </form>
</body>
</html>

总结-javascript-ajax的更多相关文章

  1. JavaScript Ajax之美~

    JavaScript Ajax之美~ 曾经有一段时期,因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期,不被大家看好,后来,到了2005年,Google公司的很多技术都是用了aj ...

  2. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  3. 2、.net NVelocity中原生javascript ajax封装使用

    在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...

  4. javascript ajax 脚本跨域调用全解析

    javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...

  5. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  6. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  7. [转载]javascript+ajax+jquery教程11--正则表达式

    原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...

  8. JavaScript AJAX原生写法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. 非常优秀的Javascript(AJAX) 开发工具：Aptana

    非常优秀的Javascript(AJAX) 开发工具:Aptana 下面我要向你介绍一款非常优秀的Javascript(AJAX) 开发工具:Aptana.应为它实在太棒了,所以我忍不住想向你推荐它. ...

  10. javascript --- Ajax基础

    神马是Ajax? Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术. http请求 首先要了解http请 ...

随机推荐

  1. AC自动机

    AC自动机,全称Aho-Corasick自动机.如果没记错的话好像就是前缀自动机. 其实AC自动机就是KMP上树的产物.理解了KMP,那AC自动机应该也是很好理解的. 与KMP类似,AC自动机也是扔一 ...

  2. gbk和gb2312的区别

    //GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码;GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 //总体说来,GBK包括所有的汉字, ...

  3. 使用VS2010编译64的Geos库

    Geos库在cmake中总是报错,所以我决定试试nmake编译64位的库.现将编译过程记录如下: 1.下载Geos,我下的是最新版3.5.0,地址在 http://trac.osgeo.org/geo ...

  4. MapReduce类型与格式(输入与输出)

    一.输入格式 (1)输入分片记录 ①JobClient通过指定的输入文件的格式来生成数据分片InputSplit: ②一个分片不是数据本身,而是可分片数据的引用: ③InputFormat接口负责生成 ...

  5. Linux的tmpfs文件系统

    转载:http://blog.csdn.net/wxwsixis/article/details/5752186 前几天发现服务器的内存(ram)和swap使用率非常低,于是就想这么多的资源,不用岂不 ...

  6. 机器学习实战-python相关软件库的安装

    1 安装python 2 安装sublime text2 3 安装NumPy.Matplotlib http://book.51cto.com/art/201401/426522.htm Matplo ...

  7. android控件 ToggleButton的应用

    ToggleButton是android给我们提供的开关按钮, 有两种状态:选中和未选择状态. 以下是代码实例: main.xml [html] view plain copy <?xml ve ...

  8. PPM格式解析

    PPM格式其实就是RGB数据加上一个简单的文件头, 文件头部表示了图像的宽度和高度以及最大的RGB值. 文件头+rgb数据: P6\n width height\n 255\n rgbrgb... 其 ...

  9. pat甲级题解(更新到1013)

    1001. A+B Format (20) 注意负数,没别的了. 用scanf来补 前导0 和 前导的空格 很方便. #include <iostream> #include <cs ...

  10. Media Formatters in ASP.NET Web API 2

    原文:http://www.asp.net/web-api/overview/formats-and-model-binding/media-formatters 1. 网络媒体类型 媒体类型,也叫作 ...