JavaScript Ajax实现异步通信

一、浏览器与服务器的同步和异步通信

1.同步：是阻塞的，浏览器在向服务器发送请求之后一直等待服务器的响应，而没有做其他事情。
2.异步：非阻塞的，浏览器向服务器发送请求之后，继续执行其他代码，知道服务器响应，浏览器中断当前的任务，处理服务器响应。

二、没有Ajax之前浏览器是通过iframe来实现异步刷新

1.iframe标签：iframe标签通过src连接到一个页面，其实就是将需要实现异步刷新的内容使用
iframe标签包裹，

A.对iframe实现整个页面刷新，其实是通过刷新一个页面的子页面来实现异步刷新；

a.主页面代码：

<div>通过实现子页面刷新来实现异步刷新</div><iframe src="../testphp/data.php" frameborder="0"></iframe>

b.php页面代码：

<?php echo 1;?>

B.通过在刷新子页面的同时在子页面做一些操作来访问父页面元素并且修改该元素的内容

a.主页面代码：

<div id="refreshTarget"></div><form action="../php/data.php" method="post" target="targetIframe"><input type="submit" value="提交"></form><iframe name="targetIframe" frameborder="0">iframe</iframe>

b.php页面代码：

<?php echo 1;?><script type="text/javascript"> parent.document.querySelector('#refreshTarget').innerHTML = '刷新成功';</script>

三、Ajax实现异步刷新

1.使用get方法来发送请求：

/** * 使用ajax get方式来验证用户名密码是否正确 * 1.区别于表单，我们需要自己拼接查询字符串，不是表单提交，可 * 以不为表单添加name属性 * 2.将数据放在查询字符串中传到请求的页面，然后页面获得数据进 * 行操作，然后对前端返回响应数据，解析数据，刷新 */var submit = document.querySelector('#submit');submit.onclick = function(){ var nameValue = document.querySelector('#username').value; var passValue = document.querySelector('#password').value; var target = document.querySelector('#refreshTarget'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { alert(1); if(xhr.readyState == 4) { if(xhr.status == 200){ var data = xhr.responseText; if(data == 1) { target.innerHTML = '验证成功'; }else if(data == 2) { target.innerHTML = '验证失败'; } } } } var url = '../testphp/inspector.php?username='+nameValue + '&password='+ passValue; xhr.open('get',url,true); // xhr.readyState = 1; xhr.send(null); // xhr.readyState = 2; alert(2);}

2.使用post方法来发送请求：

/** * 使用ajax post方式来验证用户名密码是否正确 * 1.区别于表单，我们需要自己拼接查询字符串，不是表单提交，可 * 以不为表单添加name属性 * 2.将数据放在查询字符串中传到请求的页面，然后页面获得数据进 * 行操作，然后对前端返回响应数据，解析数据，刷新 * 3.区别于ajax,get方法就是数据是放在send发送不是添加到查询字符串 */var submit = document.querySelector('#submit');submit.onclick = function(){ var nameValue = document.querySelector('#username').value; var passValue = document.querySelector('#password').value; var target = document.querySelector('#refreshTarget'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { alert(1); if(xhr.readyState == 4) { if(xhr.status == 200){ var data = xhr.responseText; if(data == 1) { target.innerHTML = '验证成功'; }else if(data == 2) { target.innerHTML = '验证失败'; } } } } var url = '../testphp/inspector.php?'; xhr.open('post',url,true); // xhr.readyState = 1; xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); var data = 'username='+nameValue+'&password='+passValue; xhr.send(data); // xhr.readyState = 2;}

请求的php页面代码

<?phpheader('Content-type:text/html;charset=utf-8');$username = $_POST['username'];$password = $_POST['password'];if($username == 'admin' && $password == '123'){ echo 1;}else{ echo 2;}?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。