jquery ajax 返回json,html,xml类型,H5-12.29Ajax与jquery、xml、json

四、Ajax的XML

1.请求的数据格式-XML

1)客户端如何构建XML格式的数据

构建的数据类型 - 字符串类型

字符串的内容要符合XML格式的语法要求

2)服务器端如何接受符合XML格式的数据

接收到的客户端的请求数据 - 字符串类型，php集成了DOM的相关内容

DOMDocument

DOMElement

DOMNode

2.响应的数据格式-XML

1)服务器端如何构建符合XML格式的数据

设置服务器端的响应头Content-Type值为text/xml

header("Content-Type:text/xml");

构建符合XML格式的数据内容

手动方式构建字符串内容

DOMDocument对象的方法

loadXML(符合XML格式的字符串)

saveXML()方式进行响应

2)客户端如何接受XML格式的数据

使用XMLHttpRequest对象的responseXML属性接收

接收到的就是XML DOM对象(不需要进行解析)

练习：二级联动(服务器端响应的格式为xml)

五、json

JSON - javascript object notation(JS原生支持)

json数据格式源于j

特点：

易于程序员阅读和编写

易于计算机解析和生成

json是目前网络上使用最广泛的数据格式之一

JSON的结构

Array和Object

支持的数据类型

字符串、数值、布尔值、对象、数组、null

六、ajax中的json格式

请求格式为json

客户端向服务器端发送请求为json格式的数据

构建符合JSON格式的字符串

定义字符串时，保证里面使用双引号，外面使用单引号

服务器端接受json格式的数据

使用json_decode()函数进行解析

json_decode($json,true);ture代表是否转换为数组

响应格式为json

服务器端向客户发送响应为json格式的数据

手工方式构建json格式的字符串

使用json_encode()函数将php变量(数组)，转换成复合json格式的字符串

客户端接受json格式的数据

使用XMLHttpRequest对象的responseText属性接受

然后使用eval函数进行转换,如果使用()包裹，eval函数强制转换为js代码，

var json = eval("("+data+")");

七、 HTML(文本)、XML格式、JSON格式的优缺点

HTML: 简单，但解析复杂

XML: 构建、解析复杂

JSON: 轻量级

一、jQuery中的ajax

封装第一层 - 类似于原生ajax的用法

$ajax

封装第二层 - 基于第一层再次封装

$().load();

$.post();

$.get();

封装的第三层 - 特殊用法

$.getScript(); - 动态读取脚本(js代码)

$.getJson(); - 接收json格式数据

二、load(url,data,callback)方法

1. 最简单、局限性最大

url - 设置ajax的请求地址

data - 设置ajax的请求数据

要求为key:value格式，其实就是js的对象格式

callback: ajax请求成功后的回调函数

回调函数的参数就是服务器返回的数据

2. 服务器响应的数据自动写入调用load方法的属性中

3. load()方法的请求类型

1)没有请求数据时，请求类型是GET

2) 发送请求数据时，请求类型是POST

4. load()方法接受服务器端的响应数据

是以字符串类型(HTML格式)来接受

三、get/post()方法

get(url,data,callback,type)

1. 参数

url - 设置ajax的请求地址

data - 设置ajax的请求数

要求为key:value格式，其实就是js的对象格式

callback: ajax请求成功后的回调函数

回调函数的参数就是服务器返回的数据

type:设置服务器端响应的数据格式

默认为HTML，还可以为xml/json

无论是否发送请求数据，请求类型都是GET

$.get()方法可以接受HTML/XML/JSON格式

post(url,data,callback,type)

使用方式跟get一模一样

四、$.ajax(options)方法

options的格式是{key:value}

url:请求地址

type:请求类型，默认为get

async:是否异步，默认为true

contentType POST方式发送数据的前提

默认值为application/x-www-form-urlencoded

data:请求数据，格式必须为key=value

success:请求成功后的回调函数

function(data,textStatus)

data - 服务器响应的内容

textStatus - 表示ajax请求的状态，此时的值为success

error:请求失败后的回调函数

function(XMLHttpRequest,textStatus,errorThrown)

XMLHttpRequest - ajax的核心对象

errorThrown - 错误异常信息

textStatus - 表示ajax请求的状态

error/timeout/notmodified

dataType:数据响应格式

HTML/XML/JSON

五、使用$.getScript(url,calback)动态读取脚本

若JS代码过多时，会影响HTML页面加载的速度，如果已被加载的JS代码并不是立即执行，只加载马上执行的js代码，会提交效率

参数

url - 读取脚本的地址(本地或服务器)

calback - 回调函数

六、表单的Ajax异步提交 -

表单的序列化

1)serialize() 返回的是json字符串

使用表单元素的name属性值

{key:value}

2)serializeArray() 返回的是json对象

json对象由一个对象数组组成

[obj1,obj2,obj3,...]

注意：

表单必须要有name属性

jQuery.form插件

1)实现表单的异步提交，底层机制，还是使用正常的表单提交机制

2)两个核心方法 - 参数既是一个option参数

ajaxForm(options)方法

ajaxForm()不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始

ajaxSubmit(option)方法

ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

参数

target 服务器返回内容所存放的元素ID

beforeSubmit 提交前回调函数，如果返回false，则不提交

success 提交后的回调函数，一般有两个参数responseText,statusText

url 默认是form的action，如果声明，则覆盖

type 默认是form的method，如果声明，则覆盖

dataType html(默认),xml,script,json….接受服务端返回的类型

clearForm 布尔值，成功提交后，是否清除所有表单元素值

resetForm 布尔值，成功提交后，是否重置所有表单元素值

timeout 限制请求时间，大于该时间后则跳出请求

表单异步提交的方式

1)不使用submit按钮，而是使用button按钮，通过绑定click事件，实现提交

表单的序列化

表单的异步提交

(常用)依旧使用submit事件，在form元素中绑定onsubmit事件，在onsubmit事件的处理函数中要做如下事情

表单的序列化

表单的异步提交

组织表单的默认行为

3

七、getJson()方法 - 可以实现跨域提交

什么叫做跨域

跨域：

完全跨域 - IP不同

跨子域 - IP相同，但端口号不同

域名：

顶级域名 - http://www.baidu.com

二级域名 - http://www.baidu.com/kongjian

万维网协议：

默认是不允许跨域请求的

服务器那边返回的是一个函数字符串

$.getJson("url?callback=?",function(data) })