jquery_2.3 Ajax操作新

1.jQueryAjax 编程

1.1. 通过需求回顾Ajax编程

1.1.1.需求：验证用户名是否有效

需求：添加用户名的离焦校验

html代码

JS代码：

服务端代码：

问题：如何将responseText 的json格式字符串，转换为JS对象。

eval(“(”+ responseText+”)”);

1.2. jquery Ajax的开发

jquery提供了6个编写ajax的方法，分成三组：

第一组：$.ajax 是jquery提供最基本ajax编程方法，功能强大，代码复杂

第二组：为了简化$.ajax编程，提供了load、$.get、$.post(重点)

第三组: $.getScript 和$.getJSON 实现ajax的跨域请求

1.2.1.$.ajax 的使用

$.ajax(options) 是底层级AJAX函数的语法，功能强大

语法格式：

$.ajax({

type: "POST GET", // http请求方式

url: "请求地址",

data: "name=John&location=Boston", // 发送给服务器的数据

dataType：””, //预期服务器返回的数据类型。如果不指定，jQuery 将自动根据HTTP 包MIME 信息来智能判断

jsonp:callback // 解决跨域问题

success: function(){...} // 成功回调函数

});

需求：$.ajax改写用户名离焦校验

JS代码：

1.2.2.load的使用

Load的语法：jquery对象.load(url, param ,callback)

⏹url 访问服务器地址

⏹param 发送给服务器参数

⏹callback 当正常返回后执行回调函数

如果param存在，以POST方式请求，如果param 不存在，以GET方式请求需求：load改写用户名离焦校验，Ajax校验用户名是否合法

JS代码：

1.2.3.$.get和$.post的使用

语法：

$.get(url, param, callback, type)

$.post(url, param, callback, type)

⏹url 请求服务器的地址

⏹param 发送给服务器参数

⏹callback 服务器返回客户端执行success函数，接收data参数（服务器返回数据）

⏹type 指定服务器返回数据格式，如果不指定，使用response响应contextType自动

识别

案例: 点击链接获取服务器端数据

HTML代码：

JS代码：

将list对象转成xml

服务器servlet代码：

JS代码：