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. solr6.6 配置拼音分词

    参考:solr6.6 配置同义词 1.下载拼音分析包 下载地址:pinyin.zip 解压后放在core下面的lib文件夹下面: 2.修改managed-schema配置文件 <fieldTyp ...

  2. jstack来分析。当linux出现cpu被java程序消耗过高时

    我们使用jdk自带的jstack来分析.当linux出现cpu被java程序消耗过高时,以下过程说不定可以帮上你的忙: 1.top查找出哪个进程消耗的cpu高 21125 co_ad2    18   ...

  3. uva 11584 Partitioning by Palindromes 线性dp

    // uva 11584 Partitioning by Palindromes 线性dp // // 题目意思是将一个字符串划分成尽量少的回文串 // // f[i]表示前i个字符能化成最少的回文串 ...

  4. Web应用——驾培管理系统之个人管理（作者：小圣）

    Web应用--驾培管理系统之个人管理(作者:小圣) 本节博文旨在实现本次Web应用的个人管理功能.能够在登陆后 查看并改动个人信息或者进行password改动.同一时候,在输入的时候进行表单验证,验证 ...

  5. java.net.ConnectException: failed to connect to /10.0.2.2 (port 80): connect

    在使用GENYMOTION作为Android程序调试模拟器连接web服务器时,报了:java.net.ConnectException: failed to connect to /10.0.2.2 ...

  6. java常用英语单词

    abstract (关键字) 抽象 ['.bstr.kt] access vt.访问,存取 ['.kses]'(n.入口,使用权) algorithm n.算法 ['.lg.riem] annotat ...

  7. linux c中select使用技巧——计时器(转）

    通过本文你会了解到: 1. select()原型及参数说明 2. select()应用情景 3. select()注意事项 4. select()作定时器 原型 int select(int nfds ...

  8. 【Python3 爬虫】02_利用urllib.urlopen向百度翻译发送数据并返回结果

    上一节进行了网页的简单抓取,接下来我们详细的了解一下两个重要的参数url与data urlopen详解 urllib.request.urlopen(url, data=None, [timeout, ...

  9. Java 内部类种类及使用解析【转】

    内部类Inner Class 将相关的类组织在一起,从而降低了命名空间的混乱. 一个内部类可以定义在另一个类里,可以定义在函数里,甚至可以作为一个表达式的一部分. Java中的内部类共分为四种: 静态 ...

  10. Windows网络配置脚本

    静态ip和动态ip切换 适用于:公司学校家庭的网络环境切换[请修改具体ip地址] ::ip for win7.bat::win8以上请用ipv4替换ip @echo off 设置为静态IP 设置为动态 ...