ajax介绍
问题:用户注册的时候,没有,用户名是否可用提示,导致用户需要反复的提交表单,用户体验不好。
优化:用户在书写完用户名,就有一个提示,告诉当前书写的用户名是否可用
Ajax 特点:
ajax 执行,不需要用户控制,自动发送请求和接收响应
ajax 发送请求的时候,依然按照 http 协议
ajax 请求和响应,数据量小
总结什么是 ajax:自动发送请求,接受响应,数据量非常小,依然按照 http 协议做网络的
传输,这个就是 ajax 技术。
获取 XMLHttpRequest 对象(ajax 核心对象,ajax 引擎)
<script type="text/javascript">
//获取 ajax 核心对象的方法
function getXHR() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5与其他浏览器不同
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
alert(getXHR());
</script>
向服务器发送请求——使用 open 方法和 send 方法
//测试使用 ajax 核心对象,发送请求
function test1(){
var xhr = getXHR();
xhr.open("get","/day18/ajax?username=张三",true);
//是什么:规定请求的类型、 URL 以及是否异步处理请求。
//当是post提交时请求参数放在send()中
xhr.send();
}
test1();
接收服务器响应
//测试 ajax 获取响应
function test2(){
var xhr = getXHR();
xhr.open("get","/day18/ajax?username=张三",true);
xhr.send();
/**
有一个妹子,半夜十二点,搜索一些东西
妹子(上海),百度的服务器(北京)(网络延迟)
服务器发送响应到浏览器(网络延迟)
为什么获取响应数据没有效果?
就是没有考虑网络延迟的问题
*/
//浏览器端准备接受响应
var data = xhr.responseText;
alert(data);
}
设置 onreadystatechange 事件执行函数(等待服务器响应)
//测试设置 ajax 等待服务器响应
function test3(){
//获取核心对象
var xhr = getXHR();
//设置等待服务器响应
xhr.onreadystatechange=function(){
//4: 请求已完成,且响应已就绪,200: "OK"
if (xhr.readyState==4 && xhr.status==200){
var data=xhr.responseText;
alert(data);
}
}
//发送请求
xhr.open("get","/day18/ajax?username=张三",true);
xhr.send();
}
test3()
ajax 小结(ajax 代码怎么写)
获取核心对象
设置等待服务器响应
发送请求
onreadystatechange 属性
是什么:
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
第三个参数 async: True(异步) 或 False(同步)?
async false 所有的请求和响应,需要排队执行(同步)
async true 所有的请求和响应,不需要排队执行(插队执行)(异步)
readyState 属性
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
status 属性
是什么:存储响应状态码
jQuery Ajax 支持的 API
jQuery 对 Ajax 的使用提供了非常好的封装,简单的很!
load(url, [data], [callback]) 载入 HTML 代码并插入至 DOM中,例如: $(“#mydiv”).load(“a.html”);
$.get(url, [data], [callback], [type]) Ajax 的 get 方式请求,一般用于获取数据
$.post(url, [data], [callback], [type]) Ajax 的 post 方式请求,一般用于发送表单数据
$.getJSON(url, [data], [fn]) Ajax 跨域获取服务器数据 例子: www.taobao.com 支付 www.alipay.com
$.getScript(url, [callback]) 载入并执行一个跨域的 js 文件
url:待载入页面的URL地址
data:待发送Key/value参数。
callback:载入成功时回调函数。
type:返回内容格,xml,html,script,json,text,_default.
$.ajax(url, [settings])
$.ajax({
//请求方式 type: "POST",
//请求路径 url: "${root}/ajax",
//发送参数 data: "name=John&location=Boston",
//返回的数据类型:
/**
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的script标签会
在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。
"text": 返回纯文本字符串
*/
dataType: "text",
//回调函数
//请求成功的回调函数
success: function(msg){
alert( "Data Saved: " + msg );
},
//请求失败的回调函数
error:function(msg){
alert( "Error");
}
});
</script>
get
/*
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式, xml, html, script, json, text, _default。
*/
$.get("ajax", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded1: " + data);
});
post
/*
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式, xml, html, script, json, text, _default。
*/
$.post("ajax", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded2: " + data);
});
});
JSON 技术
Json 介绍
Xml 问题:导致传输的数据量变大,解析和创建的操作复杂
JSON 字符串转换为 JavaScript 对象: eval() 或 JSON.parse() 方法
JavaScript对象转换为 JSON 对象: JSON.stringify()
java对象转成JSON