Ajax异步刷新功能及简单案例

2024-12-01 21:52:39

GET请求

方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

有关 GET 请求的其他一些注释：

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据（不修改）

POST请求

方法：

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

有关 POST 请求的其他一些注释：

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

总结一下，就是

GET在浏览器回退时是无害的，而POST会再次提交请求
GET产生的URL地址可以被Bookmark，而POST不可以
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

在下面的案例中我们两种方法都会用到，大家可以观察两者的区别。

几个一会儿会用到的知识点：

1、xmlhttp.readyState==4 && xmlhttp.status==200

在这一节的代码中用到的格式为


                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            var result = xhr.responseText;
                            var username_result = document.querySelector("#username_result");

                            if(result == "ok"){
                                username_result.innerText ="用户名可以使用";
                            }else{
                                username_result.innerText ="用户名已经被注册";
                            }
                        }

                    }

那么其中的readyState和status是什么意思呢？

xmlhttp.readyState的值及解释：
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

xmlhttp.status的值及解释：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

合起来

500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求

xmlhttp.readyState==4 && xmlhttp.status==200的解释：请求完成并且成功返回

2、针对IE6及以下的版本浏览器的兼容处理

                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }
                else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP")
                }

这里都是固定写法，可以不用记，甚至在代码中可以不写

3、onblur事件

onblur 事件会在对象失去焦点时发生。

username.onblur = function(){}

意思就是当鼠标光标从当前目标上离开并且点击了别的地方，则会执行function中的操作。

操作演示

如果我们输入的信息合法，且在数据库中查询后可以使用

如果我们输入的信息在数据库中已经有了，比如昵称已被使用或手机号已被使用

当然在这里我们并没有使用数据库，而是在php代码中使用了if...else语句进行简单的判断。

接下来我们来看最重要的----代码部分

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wellfancy</title>

    <script type="text/javascript">
        window.onload = function(){

            var username = document.querySelector("#username");
            var email = document.querySelector("#email");
            var phone = document.querySelector("#phone");

            username.onblur = function(){

                var usernameValue = username.value;
                //将usernamevalue提交给服务器，由服务器进行唯一性校验
                //1、创建对象 兼容处理（针对IE6及以下，可以不写）
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }
                else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP")
                }
                //2、准备发送,注意这里用的是get方法，因为后端的php文件在这里用的是get，如果后端工程师用的是post方法，这里则换成post
                xhr.open("get","./Server1/checkUsername.php?uname=" + usernameValue,true);

                //3、执行发送
                xhr.send(null);

                //制定回调函数
                xhr.onreadystatechange = function (){
                   //注意这里是固定写法
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            var result = xhr.responseText;

                            //下面做局部刷新
                            var username_result = document.querySelector("#username_result");

                            if(result == "ok"){
                                username_result.innerText ="用户名可以使用";
                            }else{
                                username_result.innerText ="用户名已经被注册";
                            }
                        }

                    }
                };

            };

            email.onblur = function(){
                var emailValue = email.value;
                var xhr = null;
                if(window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                var param = "e=" + emailValue;
                xhr.open("post","./Server1/checkEmail.php",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send(param);

                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4) {
                        if(xhr.status == 200){
                            var result = xhr.responseText;
                            var email_result = document.querySelector("#email_result");
                            if(result == 0) {
                                //邮箱可用
                                email_result.innerText = "邮箱可以使用";
                            } else {
                                email_result.innerText = "邮箱不可以使用";
                            }
                        }
                    }
                };
            };

            phone.onblur = function(){
                var phoneValue = phone.value;

                var xhr = null;
                if(window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xhr.open("post","./Server1/checkPhone.php",true);
                var params = "phonenumber="+phoneValue;
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send(params);

                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            //xhr.responseText就是一个字符串
                            var result = xhr.responseText;

                            //希望将result这样的一个字符串转化为对象，方便我们获取里面的一些值
                            result = JSON.parse(result);
                            var phone_result = document.querySelector("#phone_result");
                            if(result.status == 0) {
                                //代表手机号码可用
                                phone_result.innerText = result.message.tips + "," + result.message.phonefrom;
                            } else if(result.status == 1) {
                                //代表手机号码不可用
                                phone_result.innerText = result.message;
                            }

                        }
                    }
                };
            };

        };
    </script>
</head>
<body>

    <h1>注册界面</h1>
    <form action="">
        用户名：<input type="text" id="username"><span id="username_result"></span><br>
        邮箱：<input type="text" id="email"><span id="email_result"></span><br>
        手机号码： <input type="text" id="phone"><span id="phone_result"></span><br>
    </form>

</body>
</html>

php代码部分：

1、checkUsername部分：

<?php

    $username = $_GET["uname"];

    if($username == 'wellfancy') {
        echo "error";
    } else {
        echo "ok";
     }

?>

2、checkEmail部分

<?php

$email = $_POST["e"];

if($email == 'wellfancy@qq.com') {
    echo 1;
} else {
    echo 0;
}

?>

3、checkPhone部分

<?php

$phone = $_POST["phonenumber"];

if ($phone == '110') {
    echo '{"status":1,"message":"手机号已被使用"}';
} else {
    echo '{"status":0,"message":{"tips":"手机号可用","phonefrom":"中国电信"}}';
}

?>

这样一个关于ajax异步刷新的简易案例就完成了，是不是通俗易懂呢？（滑稽）

以上就是Ajax异步刷新功能及简单案例的详细内容，更多关于Ajax的资料请关注我们其它相关文章！

jQuery ajax请求struts action实现异步刷新

这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是采用goole的gson-2.1.jar来转换,大家可以根据需要导入相应的jar包,在这里为了做测试将两种jar包都导入了.下面开始进入正题第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因
ajax异步请求刷新

在网站刷新的方法中,ajax刷新是一种用户体验良好的刷新方式,在结合ssh等流行的框架!最为常用了!下面就是常用一个ajax刷新表单的一个demo. $(document).ready(function () { testchaxun(); setInterval("testchaxun()",5000); }); function testchaxun(){ /* var selectId = $('#proviace').val(); */ $.ajax({ type : &quo
如何手写Ajax实现异步刷新

所谓的异步刷新,就是不刷新整个网页进行更新数据. 只有通过js才能实现Ajax,进而实行异步刷新表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面(刷新页面):ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面). [例子]==验证用户名是否重复== 使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另一个页面,在Page_Load中写查询代码并把结果返回到刷新的页面.
Ajax实现异步刷新验证用户名是否已存在的具体方法

都是简单的实例,所以直接发代码静态页面Ajax.html 复制代码代码如下: <html> <head> <title>Ajax</title> <script type="text/javascript"> function loadXMLDoc() { if (document.getElementById("account
Ajax异步刷新功能及简单案例

目录 GET请求 POST请求几个一会儿会用到的知识点: 1.xmlhttp.readyState==4 && xmlhttp.status==200 2.针对IE6及以下的版本浏览器的兼容处理 3.onblur事件操作演示 HTML代码 php代码部分: 1.checkUsername部分: 2.checkEmail部分 3.checkPhone部分这篇文章主要来介绍一下有关ajax中异步刷新的知识,以及一个简单的注册案例. 我们都知道,异步刷新是ajax中非常重要的一个功能,下面
JS留言功能的简单实现案例(推荐)

JS留言功能的简单实现案例(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq
jQuery实现简单的Ajax调用功能示例

本文实例讲述了jQuery实现简单的Ajax调用功能.分享给大家供大家参考,具体如下: 这里的jQuery调用为CDN地址://cdn.bootcss.com/jquery/3.3.1/jquery.min.js jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="//cdn
PHP会员找回密码功能的简单实现

设置思路 1.用户注册时需要提供一个E-MAIL邮箱,目的就是用该邮箱找回密码. 2.当用户忘记密码或用户名时,点击登录页面的"找回密码"超链接,打开表单,并输入注册用的E-MAIL邮箱,提交. 3.系统通过该邮箱,从数据库中查找到该用户信息,并更新该用户的密码为一个临时密码(比如:12345678). 4.系统借助Jmail功能把该用户的信息发送到该用户的邮箱中(内容包括:用户名.临时密码.提醒用户及时修改临时密码的提示语). 5.用户用临时密码即可登录. HTML 我们在找回密码的
Ajax 高级功能之ajax向服务器发送数据

1. 准备向服务器发送数据 Ajax 最常见的一大用途是向服务器发送数据.最典型的情况是从客户端发送表单数据,即用户在form元素所含的各个 input 元素里输入的值.下面代码展示了一张简单的表单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本表单</title> <style>
js编写三级联动简单案例

刚给学妹写了个简单的地区的三级联动简单案例,分享给正在学习的朋友参考下 <html> <head>  <script type="text/javascript"src="jquery1.7.1.js"></script> </head> <script type="text/javascript"> $(function(){//页
jQuery ajax的功能实现方法详解

jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能由于jq中的ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个ajax方法,他可以简单的get,post,jsonp请求就可以啦~~ var ajax = function () { // 做一些初始化,定义一些私有函数等 return function () { //
django开发post接口简单案例,获取参数值的方法

项目环境:python3.6,django2.1 接口功能: 将传入参数a和b字符串相加,返回结果 1.新建一个django项目 # 新建一个名为Post的项目 django-admin startproject Post 2.在django-test/Post/Post 文件夹下创建一个view.py文件 3.在view.py文件中写入代码 from django.http import HttpResponse import json # 定义功能 def add_args(a, b):
Python中的tkinter库简单案例详解

目录案例一 Label & Button 标签和按钮案例二 Entry & Text 输入和文本框案例三 Listbox 部件案例四 Radiobutton 选择按钮案例五 Scale 尺度案例六 Checkbutton 勾选项案例七 Canvas 画布案例八 Menubar 菜单案例九 Frame 框架案例十 messagebox 弹窗案例十一 pack grid place 放置登录窗口 TKinterPython 的 GUI 库非常多,之所以选择 Tkinte
利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

Ajax文件下载利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 1.导入组件并准备静态脚本 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> &l