Ajax_阿贾克斯

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>

你可能感兴趣的:(Ajax_阿贾克斯)