一、get请求与post请求
get请求，请求的数据会附加URL之后，以 ？分割URL和传输数据，post请求会把请求的数据放置在HTTP请求包的包体中
get请求传递数据的大小会受到限制；post请求发送的数据理论上没有大小限制
get请求不安全，post请求安全
二、Ajax简介
Ajax全称：asynchronous JavaScript and xml （异步JavaScript和xml）
通过Ajax技术可以通过与后台爱服务器进行少量的数据交换，从而实现网页的异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部刷新
三、JavaScript实现Ajax
1.获取ajax对象：
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Micorsoft.XMLHTTP")
}
2.使用Ajax对象调用open("请求方式","请求路径",是否为异步)
3.绑定状态改变事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//交互成功时执行的代码
var txt=xhr.responseText;
}
}
};
4.发送请求
xhr.send(参数)
注意：若为post提交，则必须设置请求头消息
setRequestHeader("content-type","application/x-www-form-urlencoded");
采用application/x-www-form-urlencoded的post数据和url中传参只是形式不同，本质都是传递参数
四jQuery实现Ajax
1.使用一个HTTP GET 请求从服务器加载数据$.get(url [,data] [,success])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.get("http://wthrcdn.etouch.cn/weather_mini?city=西安",function(data){
var obj=JSON.parse(data);
var high=obj["data"]["yesterday"]["high"];
$("#mydiv").html("<h3>昨日最高温度是："+high+"</h3>");
});
});
});
</script>
</head>
<body>
<input type="button" value="jQuery的ajax请求" id="btn">
<div id="mydiv"></div>
</body>
</html>
2.使用一个HTTP POST 请求从服务器加载数据$.post(url [,data] [,success])
<!DOCTYPE html>
<html lang="en">
<head>qqwwqqwqwqwwq
<meta charset="UTF-8">
<title>jQuery实现Ajax之post请求</title>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
// post提交，跨域请求会被禁止（因为“同源策略”）
$.post("http://wthrcdn.etouch.cn/weather_mini",
{"city","西安"},
function(data){
$("#mydiv").html(data);
var obj=JSON.parse(data);
var high=obj["data"]["yesterday"]["high"];
$("#mydiv").html("<h3>昨日最高温度是："+high+"</h3>");
});
});
});
</script>
</head>
<body>
<input type="button" value="jQuery的get请求" id="btn">
<div id="mydiv"></div>
</body>
</html>
3.执行一个异步的HTTP（Ajax）的 请求$.ajax([settings])
eg:ajax底层方法（post请求，使用datatpye>>>jsonp）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现Ajax之底层方法</title>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"http://wthrcdn.etouch.cn/weather_mini",//请求地址
data:{"city":"西安"}, //传递给服务器的数据
type:"post", //请求类型
dataType:"jsonp", // 期望服务器返回的数据类型
// jsonp专门解决post提交的跨域问题
beforeSend:function(){ // 发送之前的回调函数
alert("准备发送啦。。。。。")
},
success:function(data){
alert(data);
$("#mydiv").html(data["data"]["yesterday"]["high"])
},
error:function(jqXHR,textStatus,textStatus){
alert(textStatus);
},
complete:function(){
alert("completel了")
}
});
});
});
</script>
</head>
<body>
<input type="button" value="jQuery的ajax请求" id="btn">
<div id="mydiv"></div>
</body>
</html>
eg:ajax方法datatpye （get请求>>>>>datatpye是json）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dataType</title>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"http://wthrcdn.etouch.cn/weather_mini?city=西安",//请求地址
// data:{"city":"西安"}, //传递给服务器的数据
type:"get", //请求类型
dataType:"json", // 期望服务器返回的数据类型
// jsonp专门解决post提交的跨域问题
beforeSend:function(){ // 发送之前的回调函数
alert("准备发送啦。。。。。")
},
success:function(data){
var array = data["data"]["forecast"];
var result="";
for(var index in array){
result+=array[index]["date"]+"<br/>"; // 拼接数组里的日期
result+=array[index]["high"]+"<br/>";
result+=array[index]["low"]+"<br/>";
result+=array[index]["type"]+"<br/>";
result+="<hr/>";
}
$("#mydiv").html(result)
},
error:function(jqXHR,textStatus,textStatus){
alert(textStatus);
},
complete:function(){
alert("completel了")
}
});
});
});
</script>
</head>
<body>
<input type="button" value="jQuery的ajax请求" id="btn">
<div id="mydiv"></div>
</body>
</html>
原生ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript实现Ajax</title>
<script type="text/javascript">
// 该函数用来创建Ajax对象
function getXHR(){
var xhr;
if(window.XMLHttpRequest){ // 如果当前浏览器支持XMLHttpRequest对象
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP"); // 支持早期IE浏览器版本
}
return xhr;
}
function showWeather(city){
var xhr=getXHR(); // 获取Ajax对象
// 打开连接：第一个参数：请求方式;第二个参数：请求地址；第三个参数：是否异步
xhr.open("get","http://wthrcdn.etouch.cn/weather_mini?city="+city,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){ // 与服务器交互完毕
if(xhr.status==200){ // 状态码为200，说明正常
var txt=xhr.responseText; // 接收响应文本
// 将JSON字符串转换为JavaScript对象
var weather_obj=JSON.parse(txt);
var array = weather_obj["data"]["forecast"];
var result="";
for(var index in array){
result+=array[index]["date"]+"<br/>"; // 拼接数组里的日期
result+=array[index]["high"]+"<br/>";
result+=array[index]["low"]+"<br/>";
result+=array[index]["type"]+"<br/>";
result+="<hr/>";
}
document.getElementById("mydiv").innerHTML=result;
}
}
};
xhr.send(null); // 发送请求
}
</script>
</head>
<body>
<input type="button" value="获取天气信息" onclick="showWeather('西安')"/>
<div id="mydiv"></div>
</body>
</html>
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
