Ajax知识点整理

最新推荐文章于 2024-09-22 23:58:43 发布

Roger -

最新推荐文章于 2024-09-22 23:58:43 发布

阅读量414

点赞数 2

分类专栏：笔记文章标签： ajax java web jsonp js

本文链接：https://blog.csdn.net/zhaolujie111/article/details/114980934

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax

一、Ajax是什么？

Ajax是一种异步的通讯协议，用来实现局部的页面刷新。

同步和异步的区别：

-普通B/S模式(同步)AJAX技术（异步)

同步:提交请求->等待服务器处理→处理完毕返回这个期间客户端浏览器不能干任何事
异步:请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情)>处理完毕

由多种技术集合而成，使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新
可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验

二、Ajax的工作原理

1）创建XMLHttpRequest对象；
2）使用该对象向服务器发送请求；
3）服务器收到请求并返回信息给客户端；
4）客户端收到信息后将数据呈现到用户界面上；

三、具体实现

1）用new XMLHttpRequest 创建
2）.onen()打开链接
3）.setRequestHeader()设置请求头的数据格式
4）.send（）拼接数据并发送数据
5）.onreadystatechange 接受并处理返回值

import numpy as np
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div>
       <h1>登陆</h1>
       用户名:<input type="text" id="username"><br>
       密码: <input type="password" id="pwd"><br>
       班级: <input type="text" id="cla"><br>
       权限: <input type="text" id="ty"><br>
       <button id="btn">登陆</button>
   </div>
</body>
<script>
    /*  //标准的创建方法
     var xhr=new XMLHttpRequest();
     //兼容写法
     if(window.XMLHttpRequest){
         var xhr=new XMLHttpRequest();
     }
     else{
         var xhr=new ActiveXOBject("Microsoft.XMLHTTP")
     }
     xhr.open("get","test.php?id=123")
     xhr.send(); */
     document.getElementById("btn").onclick=function(){
         //第一步创建
         if(window.XMLHttpRequest){
             var xhr=new XMLHttpRequest();
         }
         else{
            var xhr=new ActiveXObject("Microsoft.XMLHTTP")
         }
         //第二步 打开链接
         xhr.open("post","地址")
         //第三步 设置请求头的数据格式(必须在发送之前写)
 
         xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
         //第四步 拼接数据并发送数据
         var un=document.getElementById("username").value;
         var pwd=document.getElementById("pwd").value;
         var cla=document.getElementById("cla").value;
         var ty=document.getElementById("ty").value;
         var send_value="username="+un+"&userpwd="+pwd+"&userclass="+cla+"&type="+ty;
         xhr.send(send_value);
         //第五步 接收并处理后台的返回值
         xhr.onreadystatechange=function(){
             if(this.readyState==4 && this.status==200){
                var data=this.responseText;
                if(data=="ok"){
                    alert("登陆成功")
                }
                else(
                    alert("登陆失败")
                )
             }+
         }
     }
 </script>
</html>