ajax技術(shù)的核心是XMLHttpRequest對象(簡稱XHR)
ajax通過原生的XMLHttpRequest對象發(fā)出HTTP請求，得到服務(wù)器返回的數(shù)據(jù)后镣典，再進(jìn)行處理。
面試必須寫的
原生javascript Ajax:
ajax包括幾個步驟：
1：創(chuàng)建ajax請求
2：發(fā)出http請求
3：收到服務(wù)器傳回的消息
4：更新網(wǎng)頁數(shù)據(jù)
xhr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="show"></div>
<ul>
</ul>
</body>
<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0];
//創(chuàng)建一個xhr對象
var xhr = new XMLHttpRequest();
//請求過程中唾琼，readyState會發(fā)生變化
// 0 - 是初始狀態(tài)
// 1 - 是開始創(chuàng)建連接
// 2 - 客戶端向服務(wù)端發(fā)送數(shù)據(jù)
// 3 - 服務(wù)端開始向客戶端返回數(shù)據(jù)
// 4 - 客戶端接收數(shù)據(jù)完畢
xhr.onreadystatechange = function(){
console.log(this.readyState);//1,2,3,4
}
xhr.onload = function(){
//在數(shù)據(jù)加載完畢后執(zhí)行onload
// if(this.readyState == 4){
// console.log("ok");
// }
// 這是PHP文件傳過來的json字符串 this.responseText兄春，需要轉(zhuǎn)為數(shù)組
// 1.可以用json.parse
// 2.可以用eval
// 如果 jsondata.php 中的數(shù)據(jù)沒有嚴(yán)格遵守JSON 格式，不能使用JSON和eval
// console.log(this.responseText);
// console.log(JSON.parse(this.responseText));
// console.log(eval("("+this.responseText+")"));
// 注釋掉json格式的數(shù)據(jù)父叙，可以輸出任意文本
document.getElementById("show").innerHTML = this.responseText;
var a = JSON.parse(this.responseText);
for(var i=0; i<a.length; i++){
var lis = document.createElement('li');
lis.innerHTML = a[i].title;
ul.appendChild(lis);
}
}
//open方法
//true 異步 false 同步（卡）
xhr.open("GET","xhr.php?action=1&data=abc",true);//創(chuàng)建一個連接
xhr.send(null);
</script>
</html>
xhr.php
<?php
//后臺輸出json
//newsL是新聞數(shù)據(jù)神郊，可能是來自文件存儲的數(shù)據(jù)肴裙，也可能是來自數(shù)據(jù)庫
//sleep(10);//延遲10s執(zhí)行
// if($_POST['title']){
// echo $_POST['title'];
// echo "<br>";
// echo $_POST['data'];
// exit;
// }
$newsList = array();
$newsList[0] = array("title" => "新聞1");
$newsList[1] = array("title" => "新聞2");
$newsList[2] = array("title" => "新聞3");
//將數(shù)組變成json串
//json_encode是json串的編碼函數(shù)趾唱，傳入一個數(shù)組類型的參數(shù)
$jsonstr = json_encode($newsList);
// echo "createList(".$jsonstr.")";
// echo $_GET['callback']."(".$jsonstr.")";
// echo "-----------";//不是json格式，會報錯
echo $jsonstr;//輸出的字符串必須是嚴(yán)格遵守json格式的蜻懦，才可以使用 JSON.parse();
// echo "----------";
?>
jquery Ajax 是對XMLHTTPRequestrian對象的封裝
基本方法就是ajax();
dataType:將字符串類型轉(zhuǎn)換為json串
參數(shù)是一組對象
$.ajax({
type:"get",
url:"../彈幕/getdanmu.php",
data:{},
type:"post",//數(shù)據(jù)提交類型
url:"../彈幕/danmu.php",//請求地址
data:{word:"abc",username:"hzx"},//發(fā)送數(shù)據(jù)
dataType:"json",//返回數(shù)據(jù)的類型
async:true,//是否為異步 甜癞，true 異步
success為數(shù)據(jù)加載完成后的回調(diào)函數(shù)
success:function(data1){
console.log(data1);
var show = document.getElementById('show');
for(i in data1){
show.innerHTML += data1[i]+"<br>";
}
}
});
get方法獲取后臺數(shù)據(jù)
$.get("getdanmu.php",{word:"abc"},function(data,status){
console.log(data,status);
},"json")
post方法獲取后臺數(shù)據(jù)
$.post("danmu.php",{word:"abc"},function(data,status){
console.log(data,status);
})
load方法引入界面
在需要彈幕頁面的HTML中加入以下代碼就可以插入鏈接的頁面
$("#show").load("../web.html");//留言導(dǎo)航頁
$("#show").load("danmu.html");
我的博客鏈接
更多資源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io
