Ajax全称Asynchronous Javascript And XML（异步JavaScript和XML）
使用ajax可以实现，在不刷新页面的情况下，也能向服务器发起请求并获取数据
常见的ajax应用：内容滚动到底后自动加载新内容、输入用户名后自动去服务器验证是否被占用、无刷新的分页……
优点： 用户体验更好，页面不需要提交或者是刷新，内容自动更新 减少网络数据流量，由于页面布局样式不同重新加载，ajax只需要从服务器上获取少量的数据即可，速度更快 缺点： 页面不跳转，导致用户无法点击后退访问之前的内容 ajax需要执行JavaScript才能加载，导致搜索引擎失效 滥用ajax会导致页面过于臃肿，明明几个页面跳转就能实现的效果，结果全部都堆到一个页面中
JavaScript原生方法实现ajax
思路：初始化XmlHttpRequest对象--发起请求-监控响应状态—获取返回值输出-
html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>title>
head>
<body>
<divid='div'>div>
<script>
varphpurl="/jQuery/aa.php";
ajax(phpurl);
functionajax(phpurl){
varrequest;
if(window.ActiveXObject) {// IE浏览器
request=newActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest) {// 除IE以外的其他浏览器
request=newXMLHttpRequest();
}
request.open("GET", phpurl ,true);//发送请求参数
request.onreadystatechange=callBack;//捕获请求的状态
request.send();//发送
//console.log(request);
functioncallBack() {//检查请求参数
if(request.readyState==4) {//4表示请求已完成，且响应已就绪
if(request.status==200) {//返回页面状态吗
// 获取数据
document.getElementById('div').innerHTML=request.responseText;//把DIV的内容换成返回值
}else{
alert('请求失败');
}
}
}
}
JavaScript jQuery方法实现ajax
<divid='div'>div>
<inputtype="submit"onclick="ajax(phpurl1)"value="点我抽取新英雄">
<inputtype="submit"onclick="ajax(phpurl2)"value="点我抽取隐藏英雄">
<script>
varphpurl1="/jQuery/aa.php";
varphpurl2="/jQuery/bb.php";
functionajax(phpurl) {
$.ajax({
type:"GET",
url: phpurl,
success:function(html) {
$('#div').html(html);
}
})
}
script>
网友评论