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
