<!DOCTYPE html> |
<html> |
<head> |
<meta charset= "UTF-8" > |
<title></title> |
</head> |
<body> |
<p> |
ajax的优势<br> |
1.异步加载数据,无需切换页面<br> |
2.更佳的用户体验:局部刷新,及时验证,操作步骤简单<br> |
3.节省流量<br> |
|
</p> |
<p> |
使用ajax的步骤<br> |
1. new XMLHttpRequest().......买了个手机(创建ajax对象)<br> |
2.open().........按出要拨打的电话号码<br> |
3.send().........按下拨号键<br> |
4.onreadystateChange........拨号成功<br> |
5.responseText........听到对方讲话 |
</p> |
</body> |
<script type= "text/javascript" > |
|
|
//1.创建XMLHttpRquest对象 |
|
if (window.XMLHttpRequest) { |
//现代浏览器 |
var http = new XMLHttpRequest(); |
} else { |
//IE 6 7 8 |
var http = new ActiveXObject( "Microsoft.XMLHTTP" ); |
} |
|
|
//2.创建请求 |
//(参数1,参数2,参数3) |
//参数1: 请求方式get/post |
//参数2:是请求的地址 |
//参数3:是否异步请求,默认true |
var url = "ajax.txt" |
http.open( "GET" ,url,true); |
|
//3.发送请求 |
http.send(null); |
|
//4.捕获请求的状态 onreadystatechange会检测readystate的值变化 |
//只要其值变化,就会执行后面的函数 |
http.onreadystatechange= function () { |
// alert(http.readyState); |
//判断请求 |
if (http.readyState == 4 && http.status >= 200 && http.status<300 ||http.status == 304) { |
//5.获取返回的结果 |
console.log(http.responseText); |
} |
} |
|
|
|
|
|
|
|
|
|
</script> |
</html> |
by: 发表于:2017-10-20 14:20:02 顶(0) | 踩(0) 回复
??
回复评论