ajax的优点与缺点:
优点:异步模式,提升用户体验
减少不必要数据传输,减少带宽占用。优化浏览器和服务器的传输
ajax引擎在客户端运行,承担了一部分服务器的工作,减少了大用户下服务器的负载
缺点:不支持浏览器back按钮
安全问题:保留与服务器交互的细节
对搜索引擎的支持比较弱
XMLHttpRequest:支持异步请求的技术,Ajax的核心
作用:1.可以向服务器提出请求并处理响应而不阻塞用户2.可以页面加载以后进行页面的局部更新
如何食用ajx
1.创建XMLHttpRequest对象;
2.创建一个新的HTTP请求,并指定该HTTP请求的方法以及URL
3.设置响应HTTP请求状态变化的函数(习惯性放于2步之前)
4.发送HTTP请求
5.获取异步调用返回的数据
6.使用js和dom实现局部刷新
- 对于创建XMLHttpRequest而言:先封装了搞定各浏览器的兼容性了再var 创建对象
- 创建HTTP请求,open(method,url,async);method是请求的类型,规定请求的类型,URL及是否异步处理请求;method是请求的类型,get(默认)或post(绝大数用post);url:文件在服务器的位置(必须执行),可以是任何类型如 .txt .xml或服务器脚本文件如 .asp和 .php,async:true(异步;默认),false(同步);open方法相当于初始化请求,并不真正发送请求,只能同域请求
- get与post的区别:与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
//如果get创建请求;直接将参数在创建请求时一起传入
xhr.open("get","./serve/slider.json?user=zhangsan&id:27",true)
send(null)
xhr.open("post","./server/slider.json",true);
//如果用post发送请求需要将传入的值放入send里面
xhr.send({user:"zhangsan",id:6});
//如果用post发送请求,需要设置头部信息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
设置响应HTTP请求状态变化的函数(收到响应后相应四个属性会被填充)
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
status:从服务器返回的数字代码,如404(未找到)和200(已就绪)
status Text:伴随状态码的字符串信息
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status :200: “OK”;404: 未找到页面
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。改变一次加1
//当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="banner" id="banner">
</div>
<div class="banner" id="banner_jq"></div>
<script src="js/jquery-1.7.1.js"></script>
<script>
// 封装通用的xhr,兼容各个版本
function createXHR() {
//判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
//将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
//遍历创建XMLHttpRequest对象
var len = xhrArr.length;
for (var i=0;i<len;i++)
{
try
{
//创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
//如果创建XMLHttpRequest对象成功,则跳出循环
break;
}
catch(ex)
{
}
}
} else {
throw new Error("No XHR object available.");
}
}
var xhr = createXHR(),
data = null; //用于接收服务器端返回的数据
//响应XMLHttpRequest对象状态变化的函数
xhr.onreadystatechange = function () {
//异步调用成功
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
//获得服务器返回的数据;学会看network
//如果在没转换之前 typeof xhr.responseText;返回的是字符串类型
data = JSON.parse(xhr.responseText);
// 渲染数据
renderDataToDom();
} else {
console.log('unsuccess');
}
}
};
//创建http请求
xhr.open('get', './server/slider.json', false);
//发送http请求
xhr.send(null);
// 渲染数据
function renderDataToDom(){
var img = data.slider,i,
len = img.length,str = "",
banner = document.getElementById("banner");
// 遍历数据,拼接字符串
for(i=0;i<len;i++){
str+='<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>'
}
// 渲染图片信息
banner.innerHTML = str;
}
// jquery请求
$.ajax({
url:"./server/slider.json",
type:"post",
dataType:"json",
async:true,
success:function(datas){
renderData(datas.slider);
}
})
// jquery渲染数据
function renderData(data){
var str = "";
$.each(data,function(index,obj){
str+='<a href="'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>'
})
$("#banner_jq").html(str);
}
// 封装一个jsonp函数,实现跨域
function getJSONP(url, callback) {
if (!url) {
return;
}
var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']; //定义一个数组以便产生随机函数名
var r1 = Math.floor(Math.random() * 10);
var r2 = Math.floor(Math.random() * 10);
var r3 = Math.floor(Math.random() * 10);
var name = 'getJSONP' + a[r1] + a[r2] + a[r3];
var cbname = 'getJSONP.' + name; //作为jsonp函数的属性
if (url.indexOf('?') === -1) {
url += '?jsonp=' + cbname;
} else {
url += '&jsonp=' + cbname;
}
var script = document.createElement('script');
//定义被脚本执行的回调函数
getJSONP[name] = function (e) {
try {
callback && callback(e);
} catch (e) {
//
} finally {
//最后删除该函数与script元素
delete getJSOP[name];
script.parentNode.removeChild(script);
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
// 应该是接口有问题
/* getJSONP('http://www.imooc.com/api/home/slider/', function (response) {
console.log(response.name);
});*/
</script>
</body>
</html>
Json:javascript对象表示法;一种数据交换的文本格式,不是编程语言,读取结构化的数据,取代繁琐笨重的XML格式
JSON 值可以是:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中):创建对象数组之后可以用索引值返回里面的对象或修改;var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];
对象(在花括号中):{ "firstName":"John" , "lastName":"Doe" }
null
JSON对象的stringify()和parse()两个方法可以分别用于js对象序列化为JSON字符和把JSON字符解析为原生js值
eval()类似于JSON.parse(),但是eval()可以执行不符合json格式的代码,可能含有恶意代码
如何解决跨域:1.跨域资源共享(CORS)2.使用JSONP(常用)3.修改document.domain 4.使用window.name
jsonp的原理:1.通过script标签引入js文件 2.js文件载入成功后3.执行我们在url参数中指定的函数
jsonp的组成:回调函数(当响应到来时应该在页面中调用的函数)和数据(传入回调函数中的JSON数据)