简单示例：Ajax之XMLHttpRequest

最新推荐文章于 2024-08-06 12:58:11 发布
最新推荐文章于 2024-08-06 12:58:11 发布
阅读量112 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/huadd/archive/2009/06/09/1499820.html
版权
简单示例：Ajax之XMLHttpRequest

页面文件：XMLHttpRequest.htm

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<!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>
    <title>Ajax-XmlHttpRequest</title>
    <style type="text/css">
        body
        {
            font-family: @宋体;
            font-size: 12px;
        }
        .invalid
        {
            color: Red;
        }
    </style>

    <script type="text/javascript">
        var xmlhttp;
        
        function doCheck(username){
            if(username!=null && username!=""){
               document.getElementById("invalidMessage").innerHTML = "";
               if(window.XMLHttpRequest){
                  xmlhttp = new XMLHttpRequest();
               }
               else if(window.ActiveXObject){
                  try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch(e){
                    try{
                       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                       xmlhttp = false;
                    }
                  }
               }
            }
            if(xmlhttp){
               xmlhttp.onreadystatechange = checkNames;
               xmlhttp.open("GET","usernames.xml",true);
               xmlhttp.send(null);
            }
        }
        
        function checkNames(){
            if(xmlhttp.readyState==4){
               if(xmlhttp.status==200){
                  var enteredUserName = document.getElementById("txtUserName").value;
                  var usernameList = xmlhttp.responseXML.getElementsByTagName("username");
                  for(var i=0;i<usernameList.length;i++){
                     if(enteredUserName == usernameList[i].firstChild.nodeValue){
                        document.getElementById("invalidMessage").innerHTML = "Sorry, this username is already in use.Choose another.";
                        break;
                     }
                  }
               }
            }
        }
    </script>

</head>
<body>
    <form>
    <p>
        UserName:<input type="text" id="txtUserName" size="20" onblur="doCheck(this.value);" />
        <span id="invalidMessage" class="invalid"></span>
    </p>
    <p>
        Password:<input type="password" id="txtPassword" size="20" />
    </p>
    </form>
</body>
</html>

 

XML数据文件:usernames.xml

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<?xml version="1.0" encoding="utf-8" ?>
<userInfo>
  <user>
    <username>张三</username>
    <usersex>男</usersex>
  </user>
  <user>
    <username>李四</username>
    <usersex>男</usersex>
  </user>
  <user>
    <username>张丽</username>
    <usersex>女</usersex>
  </user>
  <user>
    <username>李平</username>
    <usersex>女</usersex>
  </user>
</userInfo>

 

posted on 2009-06-09 17:10  大丫洋芋 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/huadd/archive/2009/06/09/1499820.html

aiyi5247
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Postman教程使用
weixin_46143360的博客
10-07 251
@Controller public class UserController { @Autowired private UserService userService; @RequestMapping("/test") @ResponseBody public void test( User user) { int i = userService.addUser(user); if (i > 0) {
AJAX在不同浏览器中XMLHttpRequest对象的生成示例
12-01
以下是对不同浏览器中XMLHttpRequest对象生成的示例： ```javascript function ajax() { var xmlHttp; try { // 支持W3C标准的浏览器，如Firefox、Opera 8.0+、Safari xmlHttp = new XMLHttpRequest(); } ...
ajax的xmlHttpRequest请求
Prince_fmx的博客
09-06 407
1，ajax原理 Ajax的原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 2，原生ajax的四个过程/手写原生ajax a:new一个XHR对象 b:调用open方法 c:send一些数据 d:对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情 // GET请求： docume
Ajax之XMLHttpRequest
做一个NB的码农，且不止于码农
01-14 375
open(method,url,async)；规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）send(string) 将请求发送到服务器。 string：仅用于 POST 请求GET请求<!DOCTYPE html> <html> <head>
window.XMLHttpRequest详解（AJAX工作原理）
数据库
07-18 300
window.XMLHttpRequest详解（AJAX工作原理） XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用；但是，我们仍然很有必要理解这个对象的详细工作机制。 　　一、 引言 　　AJAX利用一个构建到所有现代浏览器内部...
ajax初始化代码
过滤阳光
03-03 765
javascript原生的ajax初始化请求方法： //初始xmlHttp function createXMLHttpRequest(){ var xmlHttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlHttp=new XMLHttpRequest();
ajaxCalls:Ajax 调用示例
05-31
Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器交换数据并更新部分网页内容。虽然名字中有XML，但现在更多地使用JSON格式传输数据，因为JSON更轻量级且易于处理。 ### 2. 创建XMLHttpRequest对象...
AJAX-1：Ajax示例1
02-22
在这个"AJAX-1"示例中，可能包含了一个简单的网页，使用AJAX从服务器获取数据，然后动态更新页面内容。同时，由于标签中提到了CSS，我们可以假设示例也展示了如何使用CSS来美化AJAX加载的内容，例如使用过渡效果、...
xmlHttpRequest用法示例ajax
05-27
XMLHttpRequest（简称XHR）是JavaScript中的一个对象，用于在不刷新整个页面的情况下，与服务器进行异步数据交换，这是实现Ajax（Asynchronous JavaScript and XML）技术的基础。在本示例中，我们将深入探讨...
Ajax核心XMLHttpRequest总结
12-10
**Ajax核心XMLHttpRequest详解** Ajax，全称"Asynchronous JavaScript and XML"，是一种综合技术，它结合了JavaScript、XMLHttpRequest对象、DOM操作、XHTML+CSS以及XML和XSLT等技术，实现页面与服务器间异步数据...
XHTML 简介
wjs2024的博客
08-02 428
XHTML，即“可扩展超文本标记语言”（eXtensible HyperText Markup Language），是一种基于XML的标记语言，旨在取代HTML作为网页内容的标准格式。XHTML继承了HTML的许多特性，但更加严格和规范，要求文档结构更加严谨，标签和属性必须正确嵌套和闭合。这种严格性使得XHTML文档更加易于解析，也更适合在不同的设备和平台上展示。
牛客JS题（二十一）数组扁平化
不起眼小菜菜的博客
08-04 859
注释很详细，直接上代码……
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1310
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 553
处理vite项目中src和url路径问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2958
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
社交媒体分享预览图片和内容修改
最新发布
wangweiscsdn的博客
08-06 206
社交媒体分享链接时的预览图片和内容
Pinia和vueX的区别是什么，刷新数据丢失怎么处理？
ggq53219的博客
08-01 494
Pinia和Vuex都是Vue.js生态系统中的状态管理库，它们在设计理念、使用方式、性能以及生态系统支持等方面存在一些差异。以下是对Pinia和Vuex主要区别的详细分析，以及处理数据刷新丢失问题的建议。
正则采集器之六——商品管理
简单，坚持
08-05 404
本文是项目实践文章"正则采集器"之五"商品管理"，后端采用框架SpringBoot，前端采用框架vue3-element-admin。
探索 Electron：打造深度书籍挖掘机的搜索体验
ztK63LrD的博客
08-03 435
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
异步请求详解：AJAX基础与XMLHttpRequest实例
Ajax，全称Asynchronous JavaScript and XML，是一种利用相关技术（如JavaScript、XMLHttpRequest、CSS和服务器端技术）创建动态、交互式的Web应用方法。 核心是XMLHttpRequest对象，它是Ajax的核心组件，负责在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值