这篇文章主要为大家详细介绍了 JavaScript Ajax 实现异步通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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');
- /* 实例化XMLHttpResquest*/
- var xhr = new XMLHttpRequest();
- /* 监控xhr对象的状态,只要xhr.readyState值改变就会触发事件由alert弹出框的值可以知道
- a.以下xhr.readyState值为4的时候表示请求响应结束,数据接收完毕并且可以使用
- b.xhr.status值为200表示请求成功
- */
- 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');
- /* 实例化XMLHttpResquest*/
- var xhr = new XMLHttpRequest();
- /* 监控xhr对象的状态,只要xhr.readyState值改变就会触发事件由alert弹出框的值可以知道
- a.以下xhr.readyState值为4的时候表示请求响应结束,数据接收完毕并且可以使用
- b.xhr.status值为200表示请求成功
- */
- 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;
- /* 修改请求头模拟from表单的post提交,
- a.设置Content-type可以使得在php页面中$_POST['key']的方式来获取对应的值,不然的话必
- 须在$HTTP_RAW_POST_DATA对象中获取
- b.设置'Content-type'既是使用类似表单方式提交数据,所以一下必须对send发送的数据序列
- 化为'name=name&value=value'的形式*/
- xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
- var data = 'username='+nameValue+'&password='+passValue;
- /* 发送请求*/
- xhr.send(data); // xhr.readyState = 2;
- }
请求的 php 页面代码
- <?php
- /* 设置响应数据的内容格式,和字符集*/
- header('Content-type:text/html;charset=utf-8');
- /*使用表单的post请求php页面中可以通过$_POST来获取*/
- $username = $_POST['username'];
- $password = $_POST['password'];
- if($username == 'admin' && $password == '123'){
- echo 1;
- }else{
- echo 2;
- }
- ?>
来源: http://www.phperz.com/article/17/0514/329546.html