<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. 线性SVM

    (本文内容和图片来自林轩田老师<机器学习技法>) 1. 线性SVM的推导 1.1 形象理解为什么要使用间隔最大化 容忍更多的测量误差,更加的robust.间隔越大,噪声容忍度越大: 1.2 ...

  2. SQL创建字段信息(表值函数)

    ALTER FUNCTION [dbo].[fnt_SplitString] ( @p1 varchar(Max), ) ) RETURNS @Table_Var TABLE ( c1 varchar ...

  3. 关于kali2.0 rolling无法连接数据的解决办法

    在使用kali2.0时,经常遇到metasploit无法连接数据库的问题,经过在网上寻找资料,很多都是对kali2.0的,有些路径都是不同的了,所以未能解决, 最后在自己的摸索下,找到了如下方法: 其 ...

  4. css垂直居中 两种方法

    在前端面试的时候我们经常会被问道怎样使一个元素在页面垂直居中呢,这也是一个老生常谈的问题了. 解决的方法基本都是使用定位来实现 div{display: fixed;left: 50%;top: 50 ...

  5. 使用MyBatis Generator自动创建代码（ SSM框架）

    步骤: 1.找到该文件目录 (上图文件下载地址:http://download.csdn.net/download/u014617413/9668872) 2.修改generatorConfig.xm ...

  6. Android -- 案例学习积累

    Theme ActionBar / ToolBar android.support.design.widget.CollapsingToolbarLayout android.support.desi ...

  7. Select查询执行顺序

    链接:http://blog.jobbole.com/55086/ 很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完全不同于我们所熟知的命令行语言.面向对象的程序语 ...

  8. 2.goldengate日常维护命令(转载)

    goldengate日常维护命令 发表于 2013 年 7 月 4 日 由 Asysdba 1.查看进程状态 GGSCI (PONY) 2> info all 2.查看进程详细状态,有助于排错 ...

  9. [译]：Orchard入门——给网站添加页面

    原文链接:Adding Pages to Your Site 注:内容为官方文档翻译,本人遇到的page中间是布局,而非官网的body--但此内容可以在内容定义里自行修改(本文不做介绍) 在创建Orc ...

  10. JavaOO面向对象中的注意点（二）

    1.封装: 封装主要体现在:组装类 和 信息隐藏. a.信息隐藏:①访问修饰符:private ②方法的实现:get/set方法.run()方法-控制流程 b.组装类: ①类的定义:属性.构造.行为( ...