<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. jstl 小总结 以及 jstl fn

    1.1.1 JSTL的使用 JSTL是JSP标准标签库.结合EL替换传统页面的<%%> * JSTL如果不会用.也是可以使用<%%>.但是一般在大公司使用JSTL.进入小公司. ...

  2. C#动态创建和动态使用程序集、类、方法、字段等

    C#动态创建和动态使用程序集.类.方法.字段等 分类:技术交流 (3204)  (3)   首先需要知道动态创建这些类型是使用的一些什么技术呢?其实只要相关动态加载程序集呀,类呀,都是使用反射,那么动 ...

  3. Angular2 组件

    1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...

  4. nginx和rewrite的配置

    测试ok 具体参见 http://www.ccvita.com/348.html

  5. 源码编译安装mysql

    1       概述 首先来看下mysql的下载地址: http://ftp.plusline.de/mysql/Downloads/ 这里有mysql的各种版本 操作系统:CentOS releas ...

  6. 51nod1079(中国剩余定理)

    题目链接: http://www.51nod.com/onlineJudge/user.html#!userId=21687 题意: 中文题诶~ 思路: 本题就是个中国剩余定理模板题,不过模拟也可以过 ...

  7. PHP "万能"输出随机字符串

    <?php function getRandomCode ($length = 32, $mode = 0){ switch ($mode) { case "1": $str ...

  8. 你不知道的parseInt

      首先,请允许我抄袭一段你知道的parseInt   以下节选自parseInt - JavaScript | MDN 实际上你连这些基础都没掌握 概述 parseInt() 函数将给定的字符串以指 ...

  9. react native中对props和state的理解

    最近使用react native这个新的技术做完一个项目,所以赶紧写个博客巩固一下. 今天我想说的是props和state,当然这是我个人的理解,如果有什么不对的地方,望指正. 首先我先说说props ...

  10. YUV RGB播放器 打开， 显示RGB数据

    可以查看RGB像素数据 可以通过菜单栏打开像素数据文件,也可以通过拖拽方式打开文件.如果文件名称中包含了“{w}x{h}”这样的字符串(例如“test_320x420.yuv”),系统会自动解析为该像 ...