您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

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

51自学网 2022-02-21 10:50:45
  ajax

这篇文章主要来介绍一下有关ajax中异步刷新的知识,以及一个简单的注册案例。

我们都知道,异步刷新是ajax中非常重要的一个功能,下面我们先来了解一下关于异步刷新的方法步骤以及理解。

在这里我们首先说一下关于$_GET请求和$_POST请求 。

方法:

open(method,url,async)

send(string)

其中,

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

将请求发送到服务器。

  • string:仅用于 POST 请求

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
下载地址:
Ajax实现异步加载数据
axios和ajax的区别点总结

51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1