序：本文通过几个小样例，简单介绍怎样使用jqueryAjax异步载入。

1. $(selector).load(url,[data],[callback]) :加载远程HTML文件代码并插入DOM中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选參数) 发送至server的 key/value 数据。

callback (Callback) : (可选參数) 请求完毕时(不须要是success的)的回调函数。

这种方法默认使用 GET 方式来传递的，假设[data]參数有传递数据进去。就会自己主动转换为POST方式的。jQuery 1.2 中，能够指定选择符，来筛选加载的 HTML 文档。DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

eg : $(".div1").load(url,[data],[callback])

2.$. get(url,[data],[callback]): 使用GET方式来进行异步请求

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给server的数据，以 Key/value 的键值对形式表示。会做为QueryString附加到请求URL中。

callback (Function) : (可选) 加载成功时回调函数(仅仅有当Response的返回状态是success才是调用该方法).             



3.$.post(url,[data],[callback]) :使用GET方式来进行异步请求。

參数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给server的数据。以 Key/value 的键值对形式表示。

callback (Function) : (可选) 加载成功时回调函数(仅仅有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。事实上应该为client请求的类型(JSON,XML,等等)data(Map) : (可选) 要发送给server的数据。以 Key/value 的键值对形式表示。



4.$.ajax(options):通过Http请求载入远程数据 。

这个是jQuery 的底层 AJAX 实现。

简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。

大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

注意： 假设你指定了 dataType 选项，请确保server返回正确的 MIME 信息，(如 xml 返回 "text/xml")。

错误的 MIME 类型可能导致不可预知的错误。

当设置 datatype 类型为 'script' 的时候，全部的远程(不在同一个域中)POST请求都回转换为GET方式。

$.ajax() 仅仅有一个參数：參数 key/value 对象，包括各配置及回调函数信息。

具体參数选项见下。

jQuery 1.2 中，您能够跨域载入 JSON 数据，使用时需将数据类型设置为 JSONP。

使用 JSONP 形式调用函数时。如 "myurl?

callback=?

" jQuery 将自己主动替换 ?

为正确的函数名。以运行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自己主动调用回调函数。

參数列表：

參数名 类型 描写叙述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET")， 默觉得 "GET"。注意：其他 HTTP 请求方法。如 PUT 和 DELETE 也能够使用，但仅部分浏览器支持。
timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下。全部请求均为异步请求。

假设须要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完毕才干够运行。
beforeSend Function 发送请求前可改动 XMLHttpRequest 对象的函数。如加入自己定义 HTTP 头。

XMLHttpRequest 对象是唯一的參数。

function (XMLHttpRequest) {

         this; // the options for this ajax request

         }
cache Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中载入请求信息。
complete Function 请求完毕后回调函数 (请求成功或失败时均调用)。

參数： XMLHttpRequest 对象，成功信息字符串。

function (XMLHttpRequest, textStatus) {

         this; // the options for this ajax request

         }
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至server时内容编码类型。

默认值适合大多数应用场合。
data Object,

String		 发送到server的数据。将自己主动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自己主动转换。必须为 Key/Value 格式。假设为数组，jQuery 将自己主动为不同值相应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType String

预期server返回的数据类型。假设不指定，jQuery 将自己主动依据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数參数传递。可用值:

"xml": 返回 XML 文档。可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包括 script 元素。

"script": 返回纯文本 JavaScript 代码。

不会自己主动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?

callback=?

" jQuery 将自己主动替换 ? 为正确的函数名，以运行回调函数。
error Function (默认: 自己主动推断 (xml 或 html)) 请求失败时将调用此方法。

这种方法有三个參数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) {

         // 通常情况下textStatus和errorThown仅仅有当中一个有值

         this; // the options for this ajax request

         }
global Boolean (默认: true) 是否触发全局 AJAX 事件。

设置为 false 将不会触发全局 AJAX 事件。如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在server数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息推断。
processData Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并不是字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。假设要发送 DOM 树信息或其他不希望转换的信息，请设置为 false。
success Function 请求成功后回调函数。

这种方法有两个參数：server返回数据，返回状态

function (data, textStatus) {

         // data could be xmlDoc, jsonObj, html, text, etc...

         this; // the options for this ajax request

         }

----------------------------------------------------------------------------------------------------

1. 程序截图：

---------------------------------------------------------------------

1.jqueryAjax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <head>

    <title>jquryAjax1.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script>

   	$(function(){

   	 $("#input1").keydown(function(){

    $("#input1").css("background-color","#FFFFCC");

  });

  $("#input1").keyup(function(){

  		txt = $("#input1").val();

  		$("#span1").load("hint.jsp",{suggest:txt});

    $("#input1").css("background-color","#D6D6FF");

  });

   	$("#btn1").click(function(){

   		$("#p1").load("demo.txt #p1",function(responseTxt,statusTxt,xhr){

   			if(statusTxt=="success"){

   				alert("外部数据载入成功！");

   			}else if(statusTxt=="error"){

   				alert("Error:"+xhr.status+","+xhr.statusText);

   			}

   		});   	

   	});

   	$("#btn2").click(function(){

   		$.get("demo.txt #p1",function(data,status){

   			alert("Data:"+data+"\n Status:"+status);

   		});

   	});

   		$("#btn3").click(function(){

   		$.get("test.jsp",

   		{

   			name:"jack",

   			pwd:"12345"

   		},

   		function(data,status){

   			alert("Data:"+data+"\n Status:"+status);

   		});

   	});

   	});    	

    </script>

  </head>

  <body>

      <p id="p1">欢迎来到 jqueryAjax 的世界！</p>

      <button id="btn1">获得外部的内容</button>

      <br><br>

      <button id="btn2"> 查看$.get(URL,callback) </button>

      <br><br>

      <button id="btn3"> 查看$.post(URL,data,callback) </button>

      <br><br>

      <p>请在以下的输入框中输入名字（a 到 z 的字符）：</p>

      <p>名字 : <input type="text" id="input1" /></p>

      <p>建议：<span id="span1"></span></p>

  </body>

</html>

2.Myhtml.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    This is my HTML page. <br>

  </body>

</html>

3.test.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <%= request.getParameter("name") %>

    <%= request.getParameter("pwd") %>

4.hint.jsp

<%@page import="java.io.PrintWriter"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String params = request.getParameter("suggest");

if(params==""){

	out.write("没有建议词汇");

}

else{

	String[] a ={"alan","afanda","amari","binary","bbk","bank"};

	StringBuffer results = new StringBuffer();

	for(int i=0 ; i<a.length ; i++ ){

		if(a[i].startsWith(params)){

		results.append(a[i]+",");

		}

	}

	if(results.length()==0){

		System.out.println("没有建议词汇");

		out.write("没有建议词汇");

	}else{

		//去掉最后一个逗号

		results.deleteCharAt(results.length()-1);

		out.write(results.toString());

		System.out.println(results.toString());

}

}

 %>

5.demo.txt

<h2>jQuery and AJAX is FUN!!!</h2>

<p id="p1">This is some text in a paragraph.</p>



jquery_ajax 入门实例的更多相关文章

  1. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  2. struts入门实例

    入门实例 1  .下载struts-2.3.16.3-all  .不摆了.看哈就会下载了. 2  . 解压  后 找到 apps 文件夹. 3.    打开后将 struts2-blank.war   ...

  3. Vue.js2.0从入门到放弃---入门实例

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...

  4. wxPython中文教程入门实例

    这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下     wxPython中文教程入门实例 wx.Window 是一个基类 ...

  5. Omnet++ 4.0 入门实例教程

    http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用. ...

  6. Spring中IoC的入门实例

    Spring中IoC的入门实例 Spring的模块化是很强的,各个功能模块都是独立的,我们可以选择的使用.这一章先从Spring的IoC开始.所谓IoC就是一个用XML来定义生成对象的模式,我们看看如 ...

  7. Node.js入门实例程序

    在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...

  8. Java AIO 入门实例（转）

    Java7 AIO入门实例,首先是服务端实现: 服务端代码 SimpleServer: public class SimpleServer { public SimpleServer(int port ...

  9. Akka入门实例

    Akka入门实例 Akka 是一个用 Scala 编写的库,用于简化编写容错的.高可伸缩性的 Java 和 Scala 的 Actor 模型应用. Actor模型并非什么新鲜事物,它由Carl Hew ...

随机推荐

  1. Oracle数据库的日常使用命令

    1.     启动和关闭数据库 sqlplus /nolog; SQL >conn / as sysdba;(上面的两条命令相当于sqlplus ‘/as sysdba’) SQL >st ...

  2. Python学习-day4

    学习装饰器,首先听haifeng老师讲解了一下准备知识. 1.函数即变量 2.高阶函数+嵌套函数==>装饰器 装饰器的作用是在,1)不改变源代码,2)不改变原函数的调用方式的前提下为函数增加新的 ...

  3. Linux 使用 yum 查看安装的软件包

    Linux系统下yum命令查看安装了哪些软件包: $yum list installed //列出所有已安装的软件包 yum针对软件包操作常用命令: 1.使用YUM查找软件包 命令:yum searc ...

  4. 2016-2017 ACM Central Region of Russia Quarterfinal Programming Contest BHanoi tower

    B Hanoi tower It has become a good tradition to solve the “Hanoi tower” puzzle at programming contes ...

  5. 剑指offer 面试题38

    面试题38:数字在排序数组中出现的次数 题目:统计一个数字在排序数组中出现的次数.例如输入排序数组{1,2,3,3,3,3,4,5}和数字3,由于3在这个数组中出现了4次,因此输出4. 主要的思路是进 ...

  6. Unity3D - UGUI的初级应用

    添加字体: 把下载好的字体拖拽到Project面板中 - 点击Text组件中Text属性后面的圆点 - 选择刚刚拖拽的字体即可. 创建ToggleGroup(开关组): 1.在Canvas下创建两个T ...

  7. JSON的使用_检查JSON工具

    json简单说就是javascript中的对象和数组. 1.对象:对象在js中表示为"{}"扩起来的内容,数据结构为 {key:value,key:value,...}的键值对的结 ...

  8. 【Vjudge】P558E A Simple Task（线段树暴力）

    题目链接 这题……太暴力了吧…… 开二十六棵线段树维护l到r字符i出现的次数,然后修改的时候暴力修改,输出的时候暴力输出……就过了…… 然后我还没想到…… qwq #include<cstdio ...

  9. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

  10. HDU——1205吃糖果（鸽巢原理）

    吃糖果 Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submis ...