Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的。

jQuery封装了Ajax的交互过程，用户不须要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest建立连接、发送请求、发送方式、接收方式等细节，利用jQuery定义

的几个简单方法。就可以轻松实现client与服务端异步通信的问题，从而帮助开发者从繁琐的技术细节中解脱出来，专心于业务层开发工作。

最初始的JavaScript的Ajax在刚刚接触编程的时候接触过，如今都忘没了，仅仅记得首先得获取XMLHttpRequest对象，实际开发中用的全都是jQuery封装好的Ajax，用的也是非常繁。

jQuery中$.ajax()方法属于最底层的方法，第二层是load()、$.get()和$.post()方法，第三层是$.getScript()和$.getJSON()方法，当中当属第二层的三个方法使用的频率最高。

1、使用get和post请求

get()方法包括4个參数，说明例如以下：

第一个參数表示要请求的URL地址

第二个參数表示一个对象结构的 名/值对 列表

第三个參数表示异步交互成功之后调用的回调函数，回调函数的參数值为server端对应的信息。

第四个參数表示server端响应信息返回的内容格式(如XML、HTML、Script、JSON、Text)

当中第一个參数Url是必选參数。后面三个为可选參数。

get()方法是仅仅能在请求成功后调用回调函数,假设要在出错的时候运行回调函数。则必须使用$.ajax()方法。第二个參数所传递的參数能够写在url后面。

<span style="font-family:SimSun;font-size:12px;">		$.get(

				"test1.jsp",

				{

					name:"haha",

					pass:"123"

				},

				function(data){			//回调函数

					alert(data);		//响应信息

				}

			)

		就能够改成

		$.get

		(

			"test1.jsp?

name=haha&pass=123",function(data){

				alert(data);

			}

		)	</span>

jQuery还定义了两个专用方法getJSON()和getScript()。这两个方法的功能和使用方法与get是全然同样的,仅仅是支持前三个參数,不须要设置第四个參数，从他们的名字上就看出了他

们已经指定响应数据的类型。

post()方法与get()方法差点儿同样,仅仅是请求方式的不同,详细选择哪种请求方式开发者自己依据特定需求去决定。

2、$.ajax

$.ajax方法的一些參数

url 
 发送请求的地址,默觉得当前页面地址。
type
 设置请求方式，如GET或者POST，默觉得GET。
timeout
 设置请求超时时间(毫秒)。

此设置将覆盖全局设置。
data
 发送到server的数据。将自己主动转换为请求字符串格式,必须为key/value格式。
dataType
 预期server返回的数据类型。假设不指定，jQuery自己主动依据HTTP包括的MINE信息返回responseXML或responseText。

 xml：返回xml文档，可用jquery处理

 html：返回纯文本HTML信息：包括的script标签会在插入DOM时运行

 script：返回纯文本JavaScript代码。不会自己主动缓存结果,除非设置了cache參数。

 json：返回JSON数据

 text：返回纯文本字符串
async                                           
 boolean类型,这个參数极为重要！

！

设置是否为异步请求,默觉得true,即全部请求均为异步请求。

假设须要发送同步请求,设置为false就可以。

同步和异步的差别,同步请求将锁住浏览器,用户其它操作必须等待请求完毕才干够运行;而异步请求不会影响其它代码的运行。回忆一下曾经遇到过这样的问题,就是在ajax方法内给变量赋值,再ajax方法后面alert该变量,有时候是得不到ajax方法内赋予的那个值。就是由于ajax请求设置的是异步请求的原因。
beforeSend
 发送请求可改动XMLHttpRequest对象的函数,如加入自己定义的HTTP头,XMLHttpRequest对象时唯一參数，该函数假设返回fasle,能够取消本次Ajax请求。不经常使用，反正我是还没用过。
cache
 设置缓存。默认值为true,当dataType为script的时候默认值是false，设置为false的时候将不会从浏览器缓存中载入请求信息。曾经遇到过这个參数设置不正确导致的问题,比較经常使用。
complete
 请求完毕后的回调函数(请求成功和失败均调用)。该函数包括两个參数：XMLHttpRequest对象和一个描写叙述成功请求的类型的字符串。
global
 是否触发全局Ajax事件，默认值为true。设置为false将不会触发全局ajax事件，如ajaxStart或ajaxStop可用于控制不同的Ajax事件
success
 请求成功后的回调函数,函数的參数是由server返回并依据dataType參数进行处理后的数据
error
 请求失败时调用的回调函数。该函数包括三个參数：XMLHttpRequest对象、错误信息（可选）、捕获的错误对象。假设发生了错误,错误信息（第二个參数）除了得到null之外。还可能是timeout、error、notmodified和parsererror。
scriptCharset
 仅仅有当请求时datatype为jsonp或script,而且type是GET才会用于强制改动charset。

通常在本地和远程的内容编码不同一时候使用。
dataFilter
 给Ajax返回的原始数据进行预处理的函数。提供data和type两个參数，data是ajax返回的原始数据，type是ajax请求时设置的dataType參数。函数的返回值将由jquery进一步处理。


其余也有一些。差点儿没用过，不整理了。

3、跟踪状态

jQuery在XMLHttpRequest对象定义的readyState属性基础上，对异步交互中server响应状态进行封装,提供了6个响应事件,以便于进一步细化对整个请求响应过程的跟踪

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

  <script type="text/javascript">

	//页面载入方法

	$(function(){

		$("input").click(function(){

			$.ajax({

				type:"POST",

				url:"addClass.html",

				data :"name=css8"

			});

			//设置全局ajax跟踪事件

			$(document).ajaxStart(function(){

				alert("Ajax请求開始")

			});

			$(document).ajaxSend(function(){

				alert("Ajax请求将要发送")

			});

			$(document).ajaxComplete(function(){

				alert("Ajax请求完毕")

			});

			$(document).ajaxSuccess(function(){

				alert("Ajax请求成功")

			});

			$(document).ajaxStop(function(){

				alert("Ajax请求结束")

			});

			$(document).ajaxError(function(){

				alert("Ajax请求失败")

			});

		})

	})

  </script>

 </head>

 <body>

	 <input type="button"  value="ajax请求过程">

 </body>

</html></span>

4、设置Ajax全局參数

对于频繁与server进行交互的页面来说,每一次交互都要设置很多选项,这样的操作是非常繁琐的,也easy出错。为此,jQuery定义了ajaxSetup()方法，该方法能够预设异步交互中的通用

选项。从而减轻频繁设置选项的繁琐。

ajaxSetup()方法的參数跟$.ajax()方法的參数类似,都是一个參数列表,在该方法中设置的选项能够实现全局共享,从而在详细的交互中仅仅要

设置个性化參数就可以。

用法：

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

  <script type="text/javascript">

	//页面载入方法

	$(function(){

		$.ajaxSetup({

			type:"POST",

			dataType:"text",

			success:function(data){

				alert(data);

			}

		});

		$("input").eq(0).click(function(){

			$.ajax({

				data:"name=wang"

			});

		});

		$("input").eq(1).click(function(){

			$.ajax({

				data:"name=zhang"

			});

		});

	})

  </script>

 </head>

 <body>

	<input type="button" value="按钮1" onclick="">

	<input type="button" value="按钮2" onclick="">

 </body>

</html></span>

知道有这个东西即可,用起来还是比較简单 的。

jQuery整理笔记八----jQuery的Ajax的更多相关文章

  1. jQuery整理笔记文件夹

    jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...

  2. jQuery整理笔记七----几个经典表单应用

    1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...

  3. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  4. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  5. jQuery:自学笔记(2)——jQuery选择器

    jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...

  6. jQuery整理笔记9----函数形式发展

    在一些照片中使用演示样本.插入.样式文件下载:点我进入下载 过去在开发过程中关于table方面的jquery应用不过局限于使用jquery操作table添加一行.删除一列等等操作.今天整理的跟过去用的 ...

  7. jQuery整理笔记九----功能性表格开发

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hai_cheng001/article/details/27536965 演示样例中用到的一些图片. ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery整理笔记2----jQuery选择整理

    一个.基本的选择 1.ID选择器 JavaScript提供了原生方法实如今DOM中选择指定ID值得元素. 使用方法例如以下: var element=document.getElementById(& ...

随机推荐

  1. Java源码阅读LinkedHashMap

    1类签名与注释 public class LinkedHashMap<K,V> extends HashMap<K,V> implements Map<K,V> 哈 ...

  2. Hello Ragel -- 生成状态机的神器

    Ragel 是个很 NB 的能生成状态机的编译器,而且支持一堆语言:C.C++.Object-C.C#.D.Java.Go 以及 Ruby. 原来的文本解析器是用正则表达式实现的,随着状态(if-el ...

  3. CSDN个人空间、问答频道停站维护公告

    各位亲爱的用户:          CSDN个人空间.问答频道将于2014年11月17日18点至11月17日24点进行系统维护升级,升级期间会影响大家的正常訪问和操作.给大家带来不便.敬请广大用户谅解 ...

  4. 大话项目管理工具之Jira篇

    前言 上一篇文章谈的是知识管理工具 -- Confluence,它来自澳大利亚 Atlassian 公司. 非常凑巧的是,今天要介绍的 JIRA 也是来自 Atlassian 公司的.但他不再是知识管 ...

  5. 关于winform中子窗体最大化的问题

    在构建winform程序时,普遍的做法是将主窗体设置成 MDI Container,使它可以放置工作窗体(Form 而非 UserControl).工作窗体作为子窗体填充工作区,一般设置 FormBo ...

  6. js知识地图--js大脑图beta01版正式发布

    原文地址 http://zhangyaochun.iteye.com/blog/1682605 原作者:zhangyaochun

  7. Yum Error Another app is currently holding the yum lock; waiting for it to exit

    Another app is currently holding the yum lock; waiting for it to exit... The other application is: P ...

  8. MySQL(8)--Cluster 7.4 rpm centos7

    还没来得及写.我就知道一个月完毕不了,暂时添加的工作总是拖后腿. .. MySQL集群 docker下安装MySQL Cluster报错了.是我image的包少了perl.老实装吧.image又小不了 ...

  9. Atitit.获得向上向下左的右的邻居的方法 软键盘的设计..

    Atitit.获得向上向下左的右的邻居的方法 软键盘的设计.. Left right可以直接使用next prev.. Up down可以使用pix 判断...获得next element的posit ...

  10. Atitit.python web环境的配置 attilax 总结

    Atitit.python web环境的配置 attilax 总结 1. 下载modpython/1 1.1. 安装python2.5.11 1.2. 安装modpython1 2. 设置py文件的u ...