您的位置：首页 > Web前端 > JavaScript

Ajax介绍及入门--原生JavaScript使用GET方法

2017-11-29 11:23 681 查看

Ajax其实就是利用JavaScript的XMLHttpRequest对象实现HTTP请求和接收。

首先看一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="click" onclick="fetch();alert('aaaa')">
<div id="test"></div>
</body>
<script>
function fetch(){
var xhr=new XMLHttpRequest();//创建XMLHttpRequest的对象

// onreadystatechange==> 当 readyState 变化时 , 会触发此事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//  代表请求的状态 , 不断变化 ,0 变化到 4 的时候 , 请求全部结束
document.getElementById("test").innerHTML=xhr.responseText;//responseText ==>  响应的内容
}
}

//open("GET/POST",url,true/false);
//第一个参数是action的方式,请使用全大写格式
//第二个参数是http请求的url,url
//第三个参数表示是否选择异步的方式(false表示同步，true表示异步)
xhr.open("GET","index.php",true);//此处使用同步方式
//xhr.open("GET","index.php?id=2&role=admin",false);//可以在url中携带参数

xhr.send();
//如果是以GET方式，则send方法不能有参数
//如果send方法有参数，则代表使用的是POST方式
//因为GET表示获取资源，POST表示提交数据
}
</script>
</html>

　　

　　其中请求的index.php内容为

<?php
sleep(3);
$arr=array("aaa","bbb","ccc","dddd","eee","fff");
print_r($arr);
?>

　　注意，如果采用同步方式，即async为false，因为上面index.php中先睡眠了3秒，所以ajax在请求index.php数据时，并不能立即获得response，所以要等待3秒才能获得response，所以3秒后ajax获取response之后，之后的JavaScript语句（alert('aaaa')）才能运行。

　　如果采用异步方式，即Async为ture，则会先执行fetch()，但是服务器端的程序要sleep 3秒，所以fetch()并不能在请至之后立马得到响应，所以客户端的fetch()要等待3秒，3秒钟还没到的时候，假设请求0.5秒之后，就会顺序执行alert('aaa')，然后执行到后面的某条语句的时候，3秒之后，也就是fetch()获得response之后，就立即执行fetch()中规定的会去到response之后的操作，采用异步的方式并不会阻塞其他语句的执行。注意这段话里面的3秒钟是假设的，实际的时间可能长，可能短，但是异步就是在执行一条语句之后，并不需要等待这条语句的运行结果，直接接着执行下面的语句。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航