Ajax:异步的JavaScript和XML
1. 比较
没有Ajax的:
有Ajax:
2.XMLHttpRequest
(1)属性
服务器响应:
①responseText:字符串形式的响应数据
②responseXML:XML形式响应数据
3. 实现方式
3.1 原生JS实现
function fun() {
//发送异步请求
//1.创建核心对象
var xmlHttp;
if(window.XMLHttpRequest) { //非IE浏览器
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { //IE浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {
}
}
}
//2. 建立连接
//参数1:请求方式
//参数2:请求的URL
//参数3:true,异步 false,同步
xmlHttp.open("GET","ServletTest?name=xt",true);
//xmlHttp.open("POST","test.txt",true);
//3.发送请求
xmlHttp.send();
//xmlHttp.send("name=value"); //post请求的参数
//4.接收并处理服务器的响应结果
xmlHttp.onreadystatechange = function () {
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
document.getElementById("div2").innerHTML=xmlHttp.responseText;
}
}
}
3.2 JQuery方式
(1)$.ajax
<script> function fun(){ $.ajax({ url:"ServletTest", //url type:"POST", //请求方式 data:{"name":"xt","age":20}, success:function (data) { //响应成功的回调函数 var x = $("#input2"); x.val(data); } }); } </script>
(2)$.get("url",data,callBack,dataType)
发送GET请求
(3)$.post("url",data,callBack,dataType)
发送POST请求
------------------------------------------------------------------------------------------------------------------------------------------
JSON
javascript对象表示法
比XML更小,能更快解析
语法:
键值对保存一个数据
多个数据逗号分隔
[ ] 保存数组
{ } 保存对象
值:
数字、字符串、逻辑值、数组、对象、null
例子:
定义一个对象数组:
var objs = [
{"name":"name1","age":10},
{"name":"name2","age":20},
{"name":"name3","age":30},
];
获取第一个对象的值:
var a = objs[0].name //objs[0]["name"]
var b = objs[0].age //objs[0]["age"]
遍历:
for(var i in objs) {
var x = objs[i];
for(var key in x) {
console.log(key+":"+x[key]);
}
}