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"><!-- οnfοcus="":监听获得焦点事件 οnblur="":监听失去焦点事件 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基础知识的入门学习,就为大家分析完毕。
转载于:https://www.cnblogs.com/AndroidJotting/p/4366511.html
Ajax基础知识《一》相关推荐
- 网红快餐店_在一家快餐店工作解释了AJAX基础知识
网红快餐店 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 在一家快餐店工作解释了AJAX基础知识 (AJAX Basics Explained By Work ...
- Ajax基础知识梳理
Ajax用一句话来说就是无须刷新页面即可从服务器取得数据.注意,虽然Ajax翻译过来叫异步JavaScript与XML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件. 完 ...
- Ajax基础知识梳理 1
Ajax用一句话来说就是无须刷新页面即可从服务器取得数据.注意,虽然Ajax翻译过来叫异步JavaScript与XML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件. 完 ...
- Ajax基础知识 · 上
Ajax简单的来说,就是一个异步的javascript请求,用来获取后台服务端的数据,而并不是整个界面进行跳转. Ajax的作用:获取服务器的数据. Ajax的效果:在不刷新整个页面的情况下,通过一个 ...
- Ajax基础知识 · 下
Ajax的应用场景: 1.页面上拉加载更多数据 2.列表数据无刷新分页 3.表单项离开焦点数据验证 4.搜素框提示文字下拉列表 Ajax运行原理: 服务器端响应的数据格式:在http请求与响应的过程中 ...
- ajax基础知识必看篇(黄梦岚)
1: 什么是Ajax? Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式.快速动态网页应 ...
- jquery ajax mysql登录_ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库...
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在 如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回 ...
- WCF基础知识问与答
学习WCF已有近两年的时间,其间又翻译了Juval的大作<Programming WCF Services>,我仍然觉得WCF还有更多的内容值得探索与挖掘.学得越多,反而越发觉得自己所知太 ...
- RESTful_基础知识
目录 目录 前言 RESTful REST原则 REST的Web原则 分层系统原则 RESTful的实现 SOA 面向服务的体系结构 RPC样式 Web服务 RPC的实现过程 SOAP 简单对象访问协 ...
最新文章
- 日志服务Flink Connector《支持Exactly Once》
- 谈谈大家对PHP框架的各种误解
- 揭秘ASP.NET 2.0的Eval方法(转)
- ASP.NET 文件上传于下载
- 如何选择 WebClient HttpWebRequest HttpClient ?
- apache大师+伪静态_Apache开启伪静态示例
- python不会英语不会数学怎么自学-学习Python,数学英语基础很重要吗?
- 帧大小超过交换机mtu_三层交换机与路由器区别在哪里?
- 永久使用卡巴斯基的方法
- 推荐几款精美耐看的xshell配色方案
- 基于Spring Boot的讲师积分管理系统(毕业设计,毕设)
- 京东阿里都已入局 顺丰在即时配送的胜算有多大?
- 黑盒优化技术评测基准RABBO介绍
- 微信小程序留言功能实现
- python怎么解压rar文件_Python解压 rar、zip、tar文件的方法
- SQLTableSource
- 【读书笔记】《数学之美》——一个好方法在形式上总是简单的
- 定时开关机(二):AlarmManager的使用及对定时不准问题的修改
- Volley添加header发送请求
- ubuntu 配置拼音输入法步骤
热门文章
- 回溯法 —— 判断子集和问题是否存在解
- UnityShader4:UnityShader的形式
- 利用SQL语言实现数据库的静态完整性
- rand()与srand()的简单应用(随机数)
- 大学生程序设计邀请赛(华东师范大学)C:袋鼠妈妈找孩子
- 改变灰度图像直方图的均值和标准差
- 基于字典的超分辨率实现的各种方法
- [GCN+FocalLoss] 从数据角度分析实验 of Semi-supervised classification with graph convolutional networks
- apollo 部署 使用
- 华为怎么查看手机温度_如果你的华为手机拿去维修,记得打开这个功能,防止秘密被查看...