`

追逐WEB项目---------AJAX基础----------随想随写

阅读更多

   AJAX(Asynchronous Javascript and xml)
1.定义:是一种创建交互式网页应用的网页开发技术;
       通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,

    对网页的某部分进行更新;传统的网页如果需要更新,必须重载整个页面;(摘自百科)
2.实例解析:

--------------》效果图:

 

 

 解释:局部刷新技术给用户带来了极大地方便,用户不需要再输入所有信息然后点击提交,最后得知那条信息输入的不对,

必须重新输入;

--------------》实现步骤:

1.在jsp中调用使用了AJAX技术的方法   reg()

 

<html>
<body>




   <!--省略代码-->
    <tr>
    <td style="width:110px">注册码</td>
    <td style="width:300px"><input name="register" type="text" class="logintext" style="border-color:#de9852;color:#000;"/>
    </td>
    <td style="width:150px"><input name=""  type="button" class="scbtn1" value="验证注册码" style="width:150px" onclick="reg()"/></td>
    <td style="width:300px"><span id="tip0"></span></td>
    </tr>
   <!--省略代码-->
</body>
</html>

 2.在Javascript中写   reg()

 

//===================================================================
//方法:AJAX,验证注册码
//===================================================================
function reg()
{
	//0.获取表单域的值ֵ
	var reg=document.getElementsByName("register");
	var register=reg[0].value;
	
	
//1.创建XMLHttpRequest对象
	if(window.XMLHttpRequest)//ie7以上版本、火狐、遨游、搜狗等
	{
		
		xmlhttp=new XMLHttpRequest();
		
	}else if(window.ActiveXObject)//IE7.0以下版本
	{
		
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		
	}
	
	
	if(xmlhttp)
	{
		
		//2.设置回调函数
		
		xmlhttp.onreadystatechange=call;
		//3.设置与服务器端连接信息
		//method:提交给服务器端方式,GET或者POST
		//url:服务器端页面
		//async:同步交互还是异步交互   true:表示异步
		xmlhttp.open("POST", "servlet/ValidatorRegisterServlet", true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		
		//4.向服务器发送请求
		xmlhttp.send("register="+register);
		
	}
	}

 3.在Javascript中写   回调函数

 

//5.编写回调函数
function call()
{
	if(xmlhttp.readyState==4 )
	{
		if(xmlhttp.status==200)
		{
	var text=xmlhttp.responseText;
	var s=document.getElementById("tip0");
	
	s.innerHTML="<font color=red>"+text+"</font>";

		
		}
	}
	}

  4.servlet进行数据处理(这里使用的是假数据,没有与数据库的注册码对比)

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		//从注册页面获取注册码
		String register=request.getParameter("register");
		//判断注册码是否正确
		if("123456".equals(register))
		{
			out.println("该注册码可用!");
			
		}else
		{
			out.println("该注册码不可用!");
		}
		out.flush();
		out.close();

 

  • 大小: 42.2 KB
0
4
分享到:
评论

相关推荐

    AJAX例子-web服务-JS-无刷新.rar

    AJAX例子-web服务-JS-无刷新.rar AJAX例子-web服务-JS-无刷新.rar AJAX例子-web服务-JS-无刷新.rar AJAX例子-web服务-JS-无刷新.rar AJAX例子-web服务-JS-无刷新.rar

    jetty-util-ajax-9.3.19.v20170502-API文档-中文版.zip

    赠送jar包:jetty-util-ajax-9.3.19.v20170502.jar; 赠送原API文档:jetty-util-ajax-9.3.19.v20170502-javadoc.jar; 赠送源代码:jetty-util-ajax-9.3.19.v20170502-sources.jar; 赠送Maven依赖信息文件:jetty-...

    Ajax-wc-ajax-product-filter.zip

    Ajax-wc-ajax-product-filter.zip,Woomerce AJAX产品过滤器-是一个插件,允许您根据类别、属性和价格轻松过滤产品。您可以对产品进行排序,导航到下一页和上一页,而无需重新加载该页。,ajax代表异步javascript和xml...

    jetty-util-ajax-9.3.19.v20170502-API文档-中英对照版.zip

    赠送jar包:jetty-util-ajax-9.3.19.v20170502.jar; 赠送原API文档:jetty-util-ajax-9.3.19.v20170502-javadoc.jar; 赠送源代码:jetty-util-ajax-9.3.19.v20170502-sources.jar; 赠送Maven依赖信息文件:jetty-...

    前端项目-eldarion-ajax.zip

    下载并解压"eldarion-ajax-master"压缩包后,我们可以找到源码文件,通常包括一个或多个.js文件。将这些文件引入到项目中,然后通过在HTML元素上添加适当的data属性来启用Ajax功能。为了实现更复杂的逻辑,我们还...

    Ajax-host-webfonts-locally.zip

    Ajax-host-webfonts-locally.zip,只需点击两下按钮,caos for webfonts就会自动下载你想要的google字体到wordpress的content文件夹中,为它生成一个样式表,并将其放入主题的标题中。,ajax代表异步javascript和xml。...

    Ajax-ajax-contact-form-wordpress.zip

    Ajax-ajax-contact-form-wordpress.zip,wordpress的联系人表单,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    基于java的开发源码-ajax写的登录实例.zip

    基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip 基于java的开发源码-ajax写的登录实例.zip ...

    dynatrace-AJAX-edition-4.2.0.1528.zip

    包含的“dynatrace-AJAX-edition-4.2.0.1528.msi”是Windows Installer文件,用于在Windows操作系统上安装Dynatrace AJAX Edition。安装过程通常包括接受许可协议、选择安装路径、配置初始设置等步骤。安装完成后,...

    Ajax-magento2-ajax-cart-quick.zip

    Ajax-magento2-ajax-cart-quick.zip,magento 2 ajax购物车扩展插件提供舒适的购物体验。客户可以很容易地选择可配置的选项并在弹出窗口中编辑项目,而不会浪费重新加载页面的时间。,ajax代表异步javascript和xml。它...

    Ajax-magento2-ajax-layered-navigation.zip

    Ajax-magento2-ajax-layered-navigation.zip,ajax分层导航magento 2提供了一个过滤器列表,帮助您的客户以最短的方式搜索和获得他们最喜欢的产品。这个扩展应用了现代ajax技术来增强过滤系统,以提高用户对页面上每...

    Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip

    Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip,这个应用程序表示使用codeigniter php框架、jquery和ajax的在线聊天。我还添加了表示用于测试应用程序的数据库的sql文件。只有首先导入数据库(chat.sql),...

    Ajax-bootstrap-select-ajax.zip

    Ajax-bootstrap-select-ajax.zip,bootstrap select对数据源的ajax支持,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    Ajax-jquery-ajax-cache.zip

    Ajax-jquery-ajax-cache.zip,jquery插件,用于用“localstorage”或“sessionstorage”缓存ajax。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页...

    Ajax-SE-355---Web-Programming-Project.zip

    Ajax-SE-355---Web-Programming-Project.zip,就像一个youtube:)术语项目,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不...

    Ajax-WebStore-Spring-MVC.zip

    Ajax-WebStore-Spring-MVC.zip,webstore是一个在spring mvc中构建的成熟的在线购物系统。它使用jsp进行视图模板化,在数据库端使用mysql。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、...

    Ajax-advanced-web-developer-bootcamp-notes-examples-and-exercises.zip

    Ajax-advanced-web-developer-bootcamp-notes-examples-and-exercises.zip,例题和练习汇编。来自优秀的高级web开发人员训练营,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和...

    Ajax-ajax-shopping-cart-page.zip

    Ajax-ajax-shopping-cart-page.zip,magento 2购物车页面ajax更新数量,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    Ajax-ember-ajax.zip

    Ajax-ember-ajax.zip,在ember应用程序中发出ajax请求的服务,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...

    Ajax-Magento-ajax-add-to-cart.zip

    Ajax-Magento-ajax-add-to-cart.zip,[模块magento 1]magento ajax添加到购物车-ajoter vos produits au panier en ajax/感谢ajax将您的产品添加到购物车,ajax代表异步javascript和xml。它是多种web技术的集合,包括...

Global site tag (gtag.js) - Google Analytics