ajax技术的核心是XMLHttpRequest对象(简称XHR)
ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。
面试必须写的
原生javascript Ajax:
ajax包括几个步骤：
1：创建ajax请求
2：发出http请求
3：收到服务器传回的消息
4：更新网页数据
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];
//创建一个xhr对象
var xhr = new XMLHttpRequest();
//请求过程中，readyState会发生变化
// 0 - 是初始状态
// 1 - 是开始创建连接
// 2 - 客户端向服务端发送数据
// 3 - 服务端开始向客户端返回数据
// 4 - 客户端接收数据完毕
xhr.onreadystatechange = function(){
console.log(this.readyState);//1,2,3,4
}
xhr.onload = function(){
//在数据加载完毕后执行onload
// if(this.readyState == 4){
// console.log("ok");
// }
// 这是PHP文件传过来的json字符串 this.responseText，需要转为数组
// 1.可以用json.parse
// 2.可以用eval
// 如果 jsondata.php 中的数据没有严格遵守JSON 格式，不能使用JSON和eval
// console.log(this.responseText);
// console.log(JSON.parse(this.responseText));
// console.log(eval("("+this.responseText+")"));
// 注释掉json格式的数据，可以输出任意文本
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);//创建一个连接
xhr.send(null);
</script>
</html>
xhr.php
<?php
//后台输出json
//newsL是新闻数据，可能是来自文件存储的数据，也可能是来自数据库
//sleep(10);//延迟10s执行
// 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");
//将数组变成json串
//json_encode是json串的编码函数，传入一个数组类型的参数
$jsonstr = json_encode($newsList);
// echo "createList(".$jsonstr.")";
// echo $_GET['callback']."(".$jsonstr.")";
// echo "-----------";//不是json格式，会报错
echo $jsonstr;//输出的字符串必须是严格遵守json格式的，才可以使用 JSON.parse();
// echo "----------";
?>
jquery Ajax 是对XMLHTTPRequestrian对象的封装
基本方法就是ajax();
dataType:将字符串类型转换为json串
参数是一组对象
$.ajax({
type:"get",
url:"../弹幕/getdanmu.php",
data:{},
type:"post",//数据提交类型
url:"../弹幕/danmu.php",//请求地址
data:{word:"abc",username:"hzx"},//发送数据
dataType:"json",//返回数据的类型
async:true,//是否为异步 ，true 异步
success为数据加载完成后的回调函数
success:function(data1){
console.log(data1);
var show = document.getElementById('show');
for(i in data1){
show.innerHTML += data1[i]+"<br>";
}
}
});
get方法获取后台数据
$.get("getdanmu.php",{word:"abc"},function(data,status){
console.log(data,status);
},"json")
post方法获取后台数据
$.post("danmu.php",{word:"abc"},function(data,status){
console.log(data,status);
})
load方法引入界面
在需要弹幕页面的HTML中加入以下代码就可以插入链接的页面
$("#show").load("../web.html");//留言导航页
$("#show").load("danmu.html");
我的博客链接
更多资源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io
网友评论