Ajax基础知识《一》
对于网站开发人员，一定不会陌生的Ajax技术，本篇就让我们认识一下它，或许在日后的开发过程中我们就可以使用到。Ajax在那方面使用的比较多呢？答案：表单注册，传统的表单注册，有时需要填写大量的信息，当我们好不容易写完了，一点击提交，后台发现我们有一些字段填写有误，这是就会提示我们注册失败，请重新注册，遇到这样的情况，我想你和我一样，一定恨透这个网站了。那如何来优化这个过程呢？这个时候我们的Ajax就排上用场了，当我们填写完一行信息，就可以通过Ajax来异步的进行后台判断。说了这么多，简单的讲就是我们本篇谈到的Ajax可以实现异步操作。好了，下面我们来一起领略一下它的风采。
1、创建Ajax：
当我们需要使用Ajax时，便可以通过在javascript中创建一个XMLHttpRequest对象，通过该对象进行相关的处理。这里我们需要注意的是，有些浏览器并不支持Ajax，这个时候，当我们创建对象时就要进行一定的判断，以便保证我们的页面在不同的浏览器上正常显示。
if(window.XMLHttpRequest){//检测浏览器版本是否支持
hppt = new XMLHttpRequest();//IE7+;Firefox;Chrome;Opera
}else{
hppt = new ActiveXObject("Microsoft.XMLHTTP");//IE6;IE5
}
2、表单界面设计：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
input{
width: 160px;
height: 25px;
}
</style>
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="yellow";
} function clearStyle(y){
document.getElementById(y).style.background="white";
var hppt = new XMLHttpRequest();
http.open("GET", "http://127.0.0.1:8080/Ajxy/servlet/ajax?name=小米&pwd=123456", true);
http.send(); //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);
//http.send(); //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);
//http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//http.send("name=小米&sex=男"); //处理结果判断
if (http.readyState==4) {
if (http.status==200) {
alert("处理完成");
document.getElementById("news").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}else{
//alert(http.readyState);
}
}
</script>
</head> <body>
<center>
<div id="news"></div>
<table>
<form method="post" action="<%=request.getContextPath() %>/servlet/ajax" enctype="application/x-www-form-urlencoded">
<!-- onfocus="":监听获得焦点事件 onblur="":监听失去焦点事件 disabled="disabled"：销毁，不存在的 readonly="readonly"：只读-->
<tr>
<td>姓名：</td><td><input type="text" name="name" id="name" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
</tr>
<tr>
<td>密码：</td><td><input type="password" name="pwd" id="pwd" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
</tr>
<tr>
<td>邮箱：</td><td><input type="text" name="email" id="email" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
</tr>
<tr>
<td>操作：</td><td><input type="submit" id="submit" value="注册"/></td>
</tr>
</form>
</table>
</center>
</body>
</html>
3、Ajax的状态码：
readyState 状态 状态说明
(0)未初始化
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
(1)载入
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。
概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：创建－初始化请求－发送请求－接收数据－解析数据－完成
4、获取相应的方式：
5、select类：用来接收Ajax传输过来的数据。
public class ajax extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
name = new String(name.getBytes("iso-8859-1"), "utf-8");
String pwd = request.getParameter("pwd");
System.out.println("name="+name);
System.out.println("pwd="+pwd);
System.out.println("GET_______Ajax");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = (String) request.getParameter("name");
System.out.println("name="+name);
String sex = (String)request.getParameter("sex");
System.out.println("sex="+sex);
System.out.println("POST__________Ajax");
}
}
好了对于Ajax基础知识的入门学习，就为大家分析完毕。
Ajax基础知识《一》的更多相关文章
- Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- Ajax基础知识 浅析（含php基础语法知识）
1.php基础语法 后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- AJAX 基础知识
1.AJAX 是一种用于创建快速动态网页的技术.而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...
- Ajax基础知识（一）
随便在百度谷歌上输入Ajax都会出现一大堆的搜索结果,这已经不再是什么新奇的技术了.但若从一开始就学习了ASP.Net,使用功能齐全的Visual Studio集成开发工具,或许未必能对访问一个动态网 ...
- Json,Gson,Ajax基础知识
//json 是一种轻量级的文本格式,解析简单,他也是一键值来存,数据与数据的分割是以,来分割 //{} 看到大括号就是一个对象,[]代表集合 ,基本上所有数据的交互都是以json格式来进行传递的 / ...
- ajax基础知识
一个简单的ajax例子: Uncaught SyntaxError: Unexpected token input看看是否是漏了:或者函数没有() //更新单个简历完整度 function updat ...
随机推荐
- EDA技术与ASIC设计和FPGA开发有什么关系？FPGA在ASIC设计中有什么用途？
利用EDA技术进行电子系统设计的最后目标是完成专用集成电路ASIC的设计和实现:FPGA和CPLD是实现这一途径的主流器件.FPGA和CPLD通常也被称为可编程专用IC,或可编程ASIC.FPGA和C ...
- [置顶]PADS PCB功能使用技巧系列之NO.006- 如何实现OrCAD与PADS Layout同步？
很多同仁都喜欢用OrCAD画原理图,而PCB Layout则用PADS/PowerPCB,这两者被有些人誉为“黄金组合”,但由于两者并非一套软件,因此如何实现同步亦是需要急待解决的问题... (未完待 ...
- Android中NDK的搭建及简单使用 Android.mk相关介绍 JNI的使用
Android中NDK的搭建及简单使用: 使用NDK,简述其重要步骤:.搭建NDK环境(作用:用于自动生成jni下的.c对应的so文件)---到Android NDK官网或Android官网下载ndk ...
- 用python2.7,采集新浪博客
#coding=utf-8 #新浪博客 import urllib import re import os url=['']*1500 #每一骗博客的地址 title=['']*1500 #每一篇博客 ...
- Struts2中获取servlet API的几种方式
struts2是一个全新的MVC框架,如今被广大的企业和开发者所使用,它的功能非常强大.这给我们在使用servlet 纯java代码写项目的时候带来了福音.但是一般来说,我们的项目不到一定规模并不需要 ...
- web编程 java.io.EOFException错误
java.io.EOFException 严重: IOException while loading persisted sessions: java.io.EOFException 严重: Exce ...
- Hasor-Core v0.0.4 & Web v0.0.3 发布
“Hasor是一款开源的 Java 应用开发框架.它是围绕 Guice 为核心创建的一系列模块组合而成.使用Hasor 会加快软件软件开发效率并降低开发成本.目前 Hasor包含了 Hasor-Cor ...
- 软件工程day7
参与组内讨论,关于新功能“吐槽墙”的UI设计,小组决定使用TabControl控件实施. 于周末几天自己使用PS学习临摹了一些程序的icon,完成度不高. 鉴于正在参与开发的软件为“工具性”+“微社交 ...
- mvvm的优势
之前在项目中有个功能,是根据数据模型生成页面,然后页面变动之后,再同步到数据模型之中. 当时用的jquery写的,一点一点的控制,整个功能写下来.测试,花了很长时间,而且还担心出bug. 现在用mvv ...
- MSDN Kinect for Windows SDK中文版论坛开放了
昨天MSDN上K4W开发相关的中文版论坛正式开放了,地址 http://social.msdn.microsoft.com/Forums/zh-CN/home?forum=k4wdevelopment ...