ajax演示源码
本篇文章介绍了关于基础的原生JavaScript中的ajax操作，内容相对比较基础，对于JavaScript中ajax没够掌握清楚的同学可以再次看看学习学习JavaScript中的ajax操作，废话不那么多，我们一起来看看吧！
以下html文件都要服务器环境下打开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ceshi</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
帐号：<input type="text" id="username">
密码：<input type="password" id="password">
<input type="button" value="提交" onclick="checkname()">
</body>
<script type="text/javascript">
function checkname() {
var username = document.getElementById('username').value;
//1、创建对象
var xhr = new XMLHttpRequest();
//2、连接服务器
xhr.open('GET','name.json',true);//json数据内容如下图3
//3、向服务器发送请求
xhr.send(null);
//4、请求完成，响应就绪
xhr.onreadystatechange=function(){
if (xhr.readyState==4) {
if (xhr.status==200) {//表示已经获取到文件。
var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对
alert(str);//输出结果如图4 。
}else{
alert(xhr.statusText)//如果没有获取name.json的数据，即服务器找不到这个文件，则执行该段代码。输出框会显示“Not Found”。如果是alert(xhr.status)，则显示404；
}
}
}
};
</script>
</html>
<script type="text/javascript">
function checkname() {
var username = document.getElementById('username').value;
var boo = false;
//1、创建对象
var xhr = new XMLHttpRequest();
//2、连接服务器
xhr.open('GET','name1.json',true);
//3、向服务器发送请求
xhr.send(null);
//4、请求完成，响应就绪
xhr.onreadystatechange=function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对象
alert(str)
for (var i = 0; i < str.length; i++) {
if (username == str[i]) {
boo = true;
}
}//判断用户名是否已经存在，即输入的用户名是否存在与json文件中。
if (boo) {
alert("用户民已存在");
} else {
alert("用户名可以使用")
}
}
}
};
｝；
</script>ajax技术是一种能够将桌面应用程序的体验效果带给web应用程序的技术。这种体验效果主要就是页面的无刷新数据交换以及页面无刷新改变内容。ajax的功能真的是很多，讲不完的那种多
相关ajax文章推荐：
以上是ajax演示源码的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
解决jQuery AJAX请求遇到403错误的方法
Feb 20, 2024 am 10:07 AM
标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资
解决jQuery AJAX请求403错误的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误
如何使用Ajax从PHP方法中获取变量？
Mar 09, 2024 pm 05:36 PM
使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：
如何解决jQuery AJAX报错403的问题？
Feb 23, 2024 pm 04:27 PM
如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使
PHP代码在浏览器中如何显示源码而不被解释执行？
Mar 11, 2024 am 10:54 AM
PHP代码在浏览器中如何显示源码而不被解释执行？PHP是一种服务器端脚本语言，通常用于开发动态网页。当PHP文件在服务器上被请求时，服务器会解释执行其中的PHP代码，并将最终的HTML内容发送到浏览器以供显示。然而，有时我们希望在浏览器中直接展示PHP文件的源代码，而不是被执行。本文将介绍如何在浏览器中显示PHP代码的源码，而不被解释执行。在PHP中，可以使
PHP 与 Ajax：构建一个自动完成建议引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。
PHP 与 Ajax：创建动态加载内容的解决方案
Jun 06, 2024 pm 01:12 PM
Ajax（异步JavaScript和XML）允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax，您可以动态加载产品列表：HTML创建一个带有容器元素的页面，Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求，从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据，并将其编码为JSON格式。JavaScript解析JSON数据，并将其显示在页面容器中。点击按钮触发Ajax请求，加载产品列表。
idea如何查看tomcat的源码
Jan 25, 2024 pm 02:01 PM
idea查看tomcat源码的步骤：1、下载Tomcat源代码；2、在IDEA中导入Tomcat源代码；3、查看Tomcat源代码；4、理解Tomcat的工作原理；5、注意事项；6、持续学习和更新；7、使用工具和插件；8、参与社区和贡献。详细介绍：1、下载Tomcat源代码，可以从Apache Tomcat的官方网站上下载源代码包，通常这些源代码包是以ZIP或TAR格式等等。
