JavaScript Ajax实现异步通信

Javascript Ajax实现异步通信

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

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

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

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

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

a.主页面代码：

通过实现子页面刷新来实现异步刷新

b.php页面代码：

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

a.主页面代码：

b.php页面代码：

三、Ajax实现异步刷新

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

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方法来发送请求：

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页面代码

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