ajax相关知识点

系统管理员 2023-10-10 10:24 24阅读 0赞

**什么是ajax呢？**

ajax是一种用于创建快速动态网页的技术  
全称为：Asynchronous Javascript And XML 异步JavaScript或XML  
可以在不加载整个网页的情况下，对网页的部分内容进行更新

**ajax开发步骤**  
1.创建xmlHttpRequest对象（ajax引擎）  
2.设定ajax引擎相关参数：  
open  
onreadystatechange  
send

光看这些可能有点懵，那我们来写个例子快速上手

首先

jsp页面内容

<script type="text/javascript">
    function validateName(){
    	//创建对象
    	var xmlhttp;
    	if(window.XMLHttpRequest){
    		
    		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    		xmlhttp=new XMLHttpRequest();
    		
    	}else{
    		
    	    // IE6, IE5 浏览器执行代码
    	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	    
    	}
    	
    	//获得页面中的username
    	var username = document.getElementById("username").value;
    	
    	//将请求发送到服务器
    	xmlhttp.open("GET","ValidateNameServlet?username="+username,true);
    	
    	//响应   定义请求状态改变时调用函数，获取相应数据后，将响应结果放到页面
    	xmlhttp.onreadystatechange=function(){
    		//如果请求成功
    		if(xmlhttp.readyState==4&xmlhttp.status==200){
    			//把响应结果放进页面
    			document.getElementById("result").innerHTML=xmlhttp.responseText;
    		}
    	}
    	xmlhttp.send();
    }
    </script>
    
    username:<input type="text" name="username" id="username" onblur="validateName()"/>
    <p id="result"></p>

然后 ，我们需要有一个Servlet

在Servlet中写下面的内容

@Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	//获取username
    	String username = request.getParameter("username");
    	
    	//如果username不是空 或者 等于xiaoming 在页面输出Ok 在页面否则输出No
    	if(username!=null&&"xiaoming".equals(username)) {
    		response.setContentType("text/plain;charset=utf-8");
    		response.getWriter().println("Ok");
    	}else {
    		response.setContentType("text/plain;charset=utf-8");
    		response.getWriter().println("No");
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax相关知识点

什么是ajax呢？ ajax是一种用于创建快速动态网页的技术全称为：Asynchronous Javascript And XML 异步JavaScript或XML

系统管理员/ 2023年10月10日 10:24/ 0 赞/ 25 阅读

相关初学Ajax相关知识

一. 概念 ASynchronous JavaScript And XML 异步的JavaScript 和 XML 》》》异步和同步：客户端和服务器端相互通信的基础

谁践踏了优雅/ 2023年10月04日 17:42/ 0 赞/ 27 阅读

相关 ajax相关知识点和面试题。

Ajax是不能跨域操作的协议、域名、端口都相同才同域，否则都是跨域 1、用jquery封装的ajax $.ajax({ cache ：fa

墨蓝/ 2022年12月20日 06:11/ 0 赞/ 160 阅读

相关 vue相关知识点

1、插槽slot 插槽使组件具有更强的扩展性，抽取共性，保留不同在子组件中，使用特殊的元素slot就可以为子组件开启一个插槽（可设置默认值），该插槽插入什么内容取决于

骑猪看日落/ 2022年11月01日 04:29/ 0 赞/ 304 阅读

相关 mysql相关知识点_mysql相关知识点整理

一、安装 1、查看系统中是否已安装mysql \[root@master ~\]\ yum list installed mysql\ 已加载插件：fastestmirr

我不是女神ヾ/ 2022年10月25日 05:00/ 0 赞/ 326 阅读

相关 JavaScript相关知识点

JavaScript介绍 1今天想和大家分享的是JavaScript（以下称为js）的相关的一些知识点。1.1今天主要说一些简单的：1，js的基本介绍 2，变量和数据类型

红太狼/ 2022年05月24日 07:10/ 0 赞/ 343 阅读

相关医学相关知识点

ABO型血与RH关系？ abo血型和rh血型是两种不同的分类方式。绝大多数人都是h阳性的血型。极少数的人，会是rh阴性血型。也就是我们平常说的熊猫血。这

今天药忘吃喽~/ 2022年05月17日 09:52/ 0 赞/ 406 阅读

相关 Spring相关知识点

Spring 目的: 解决企业应用开发的复杂性功能: 使用基本的JavaBean代替EJB,并提供了更多的企业应用功能范围: 任

我就是我/ 2022年05月12日 12:08/ 0 赞/ 383 阅读

相关 Html相关知识点

web 基础的课程 html css javascript--js 后续服务器端技术 jquery.ajax 静态页面(客户端技术) html:页面的内容用适

痛定思痛。/ 2022年04月12日 08:40/ 0 赞/ 511 阅读

相关 AWS相关知识点

AWS相关知识：什么是 Amazon AWS？ Amazon AWS 是 Amazon Web Services 在北京和宁夏（中国）区域中的实施。它直接连接国内

淡淡的烟草味﹌/ 2022年03月14日 20:44/ 0 赞/ 353 阅读