ajax
2017-03-09 17:51:07 0 举报AI智能生成
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过使用在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不影响网页正常浏览的情况下，与服务器交换数据并更新部分网页内容。这种技术在提高用户体验的同时，也减少了网络数据的传输量。Ajax的核心技术是JavaScript对象XmlHttpRequest，通过该对象可以向服务器发送异步请求，并接收服务器返回的数据。如今，Ajax已经成为了现代Web开发中不可或缺的技术之一，广泛应用于各种网站和应用程序中。
作者其他创作
大纲/内容
作用：无刷新无提交进行页面局部更新
实现方式
2种方式
原生javaqSrcipt
jQuery
$.get(url,function(data){ })
$.post(url,data,fn)
$.post('3.php','age=19&id=3',fn)
$.post('3.php',{age:19,id:3},fn)
$.ajax({type:'GET',url:'url',data:'k=v&k=v',beforeSend:fn,success:fn,error:fn,complete:fn})
$.getJSON(url,fn)
只接受json数据
$("选择器").load(url);
$.getScript(url,fn)
只接受javaScript数据
原生javaScript的核心对象
XMLHttpRequest
属性
readyState
保留对象的状态
0
未发送
open
1
打开连接
send
2
接收响应头部的信息
3
接收响应的主体
4
接收响应的主体完成
status
响应状态码
200
响应完成
304
请求数据没有修改，可以用缓存
404
没有找到请求的数据
500
服务器内部错误
responseText
接收响应主体内容（文本/网页/json）
responseXML
只接受XML
方法
open(method,url,isAsn)
打开服务器的连接
method
请求方式
GET
POST
url
请求地址
isAsyn
是否为异步请求
true
异步
false
同步
send(null)
发送请求消息主体
GET
send(null)
POST
send('id=1&age=19')
事件
onreadystatechange
触发：当状态改变的时候触发
0-->1-->2-->3-->4
工作流程
创建对象
var xhr=new XMLHttpRequest( )
绑定事件
xhr.onreadystaterchange=fn
判断服务器的响应状态 200
xhr.status===200
判断服务器响应主体完成
xhr.readyState===4
接收数据
xhr.responseText;
打开连接
xhr.open( )
发送数据
xhr.send( )
处理数据类型
text/plain
服务器:header("content-type:text/plain;charset=utf-8")
客户端
原生JS
xhr.responseText
jQuery
$.get(url,fn(data){ })
text/html
application/javascript
客户端:eval(xhr.responseText)
application/xml
客户端:xhr.responseXML
application/json
服务器端：php
header('Content-Type:application/json;charset=utf-8')
json_encode($arr);
客户端：浏览器
原生 JS
var obj=JSON.parse($str)
jQuery
$.get(url,fn) 自动转换
分支主题4
子主题
子主题
分支主题5
子主题
子主题
0 条评论
下一页
为你推荐
查看更多
