AJAX

最新推荐文章于 2022-12-19 19:59:49 发布

csyyyyyy

最新推荐文章于 2022-12-19 19:59:49 发布

阅读量160

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/csyyyyyy/article/details/108261016

版权

1> 概念

   通过AJAX Asynchronous JavaScript And XML 实现异步刷新

2> 案例：检测用户名是否存在

<span>输入账号 :</span>
<input id="uname" name="uname" onkeyup="check()" type="text"> 
<span id="checkResult"></span>

   //使用AJAX 通过无刷新验证账号是否存在
  var xmlhttp;
  function check(){
    var uname = document.querySelector("#uname").value;
    var url = "后台服务器地址?uname="+uname;
    xmlhttp =new XMLHttpRequest();
    xmlhttp.onreadystatechange=checkResult; //响应函数
    xmlhttp.open("GET",url,true);   //设置访问的页面
    xmlhttp.send(null);  //执行访问
  }
   
  function checkResult(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      document.querySelector('#checkResult').innerHTML=xmlhttp.responseText;
  }

3>步骤

     1. 创建XMLHttpRequest对象
 	2. 设置响应函数 onreadystatechange
 	3. 设置要访问的页面
 	4. 发出请求
 	5. 当服务端的响应返回，响应函数被调用。
 	6. 在响应函数中，判断响应是否成功，如果成功获取服务端返回的文本，并显示在span或者div中。

4> 原理


 分析1 创建XHR对象 XMLHttpRequest
   XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
   AJAX就是通过它做到无刷新效果的
   
 分析2 设置响应函数
   XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。 
   当服务器响应回来的时候，调用怎么处理呢？ 
   通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
   
 分析3 设置并发出请求
   通过open函数设置背后的这个小线程，将要访问的页面url ，
   xmlhttp.open("GET",url,true);
   通过send函数进行实际的访问
   xmlhttp.send(null);
   null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
   只有在用"POST"，并且需要发送参数的时候，才会使用到send。
   类似这样：
   xmlhttp.send("user="+username+"&password="+password)
   
 分析4 处理响应信息
   xmlhttp.readyState 4 表示请求已完成
   xmlhttp.status 200 表示响应成功
   xmlhttp.responseText; 用于获取服务端传回来的文本
   document.querySelector('#id').innerHTML 设置span的内容为服务端传递回来的文本