Ajax的XML
1.请求的数据格式-XML
-
客户端如何构建XML格式的数据
-
构建的数据类型 - 字符串类型
-
字符串的内容要符合XML格式的语法要求
-
服务器端如何接受符合XML格式的数据
接收到的客户端的请求数据 - 字符串类型，php集成了DOM的相关内容DOMDocument DOMElement DOMNode2.响应的数据格式-XML
-
服务器端如何构建符合XML格式的数据
-
设置服务器端的响应头Content-Type值为text/xml
header("Content-Type:text/xml"); -
构建符合XML格式的数据内容
DOMDocument对象的方法
loadXML(符合XML格式的字符串)
saveXML()方式进行响应 -
客户端如何接受XML格式的数据
-
使用XMLHttpRequest对象的responseXML属性接收
-
接收到的就是XML DOM对象(不需要进行解析)
json
1.JSON - javascript object notation(JS原生支持)
2.json数据格式源于js
3.特点：
- 易于程序员阅读和编写
- 易于计算机解析和生成
- json是目前网络上使用最广泛的数据格式之一
- Array和Object
- 支持的数据类型
- 字符串、数值、布尔值、对象、数组、null
ajax中的json格式
1.请求格式为json
-
客户端向服务器端发送请求为json格式的数据
-
构建符合JSON格式的字符串
-
定义字符串时，保证里面使用双引号，外面使用单引号
-
服务器端接受json格式的数据
-
使用json_decode()函数进行解析
-
json_decode($json,true);ture代表是否转换为数组
2.响应格式为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
1.封装第一层 - 类似于原生ajax的用法
$ajax:
var data = {
name:"jj",
site:1
}
$.ajax({
url:"myPhp04.php",
type:"post",
data:data,
success:function(data,textStatus){
console.log(textStatus);
console.log(data);
},
error:function(){
},
dataType:"json",
})
2.封装第二层 - 基于第一层再次封装
$().load();
$.post();
3.封装的第三层 - 特殊用法
$.getScript(); - 动态读取脚本(js代码)
$.getJson(); - 接收json格式数据
load(url,data,callback)方法
1.最简单、局限性最大
- url - 设置ajax的请求地址
- data - 设置ajax的请求数据
要求为key:value格式，其实就是js的对象格式 - callback: ajax请求成功后的回调函数
回调函数的参数就是服务器返回的数据
2.服务器响应的数据自动写入调用load方法的属性中
3.load()方法的请求类型
- 没有请求数据时，请求类型是GET
- 发送请求数据时，请求类型是POST
4.load()方法接受服务器端的响应数据
是以字符串类型(HTML格式)来接受
get/post()方法
1.get(url,data,callback,type)
- 参数
- url - 设置ajax的请求地址
- data - 设置ajax的请求数据
要求为key:value格式，其实就是js的对象格式 - callback: ajax请求成功后的回调函数
回调函数的参数就是服务器返回的数据 - type:设置服务器端响应的数据格式
默认值为HTML，还可以为xml/json - 无论是否发送请求数据，请求类型都是GET
- $.get()方法可以接受HTML/XML/JSON格式
2.post(url,data,callback,type)
使用方式跟get一模一样
$.ajax(options)方法
1.options的格式是{key:value}
2.url:请求地址
-
type:请求类型，默认为get
-
async:是否异步，默认为true
5.contentType POST方式发送数据的前提
默认值为application/x-www-form-urlencoded
6.data:请求数据，格式必须为key=value
7.success:请求成功后的回调函数function(data,textStatus) data - 服务器响应的内容 textStatus - 表示ajax请求的状态，此时的值为success
8.error:请求失败后的回调函数
function(XMLHttpRequest,textStatus,errorThrown)
XMLHttpRequest - ajax的核心对象
errorThrown - 错误异常信息
textStatus - 表示ajax请求的状态
error/timeout/notmodified
9.dataType:数据响应格式
HTML/XML/JSON
使用$.getScript(url,calback)动态读取脚本
1.若JS代码过多时，会影响HTML页面加载的速度，如果已被加载的JS代码并不是立即执行，只加载马上执行的js代码，会提交效率
2.参数
- url - 读取脚本的地址(本地或服务器)
- calback - 回调函数
表单的Ajax异步提交 -
1.表单的序列化
-
serialize() 返回的是json字符串
使用表单元素的name属性值
{key:value} -
serializeArray() 返回的是json对象
json对象由一个对象数组组成
[obj1,obj2,obj3,...] -
注意：
表单必须要有name属性
- jQuery.form插件
-
实现表单的异步提交，底层机制，还是使用正常的表单提交机制
-
两个核心方法 - 参数既是一个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 限制请求时间，大于该时间后则跳出请求
http://www.cnblogs.com/popzhou/p/4338040.html
3.表单异步提交的方式
- 不使用submit按钮，而是使用button按钮，通过绑定click事件，实现提交
- 表单的序列化
- 表单的异步提交
- (常用)依旧使用submit事件，在form元素中绑定onsubmit事件，在onsubmit事件的处理函数中要做如下事情
- 表单的序列化
- 表单的异步提交
- 组织表单的默认行为
getJson()方法 - 可以实现跨域提交
1.什么叫做跨域
-
跨域：完全跨域 - IP不同
-
域名：
-
顶级域名 - http://www.baidu.com
-
万维网协议：
-
默认是不允许跨域请求的
-
服务器那边返回的是一个函数字符串
$.getJson("url?callback=?",function(data){ })
网友评论