Ajax讲解
AJAX：即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
步骤一：使用ajax发送get请求及处理响应
1：servlet配置如下：
package servlet; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class RegisterServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("uname");
if(name.equals("admin"))
{
response.getWriter().write("OK");
}
else
{
response.getWriter().write("NO");
}
} }
2：重头戏，配置index.jsp页面
<%@ 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>My JSP 'index.jsp' starting page</title>
<script type="text/javascript"> //给文本框注册一个失去焦点事件
window.onload=function(){
var dom=document.getElementById("txtName");
dom.onblur=function(){
myajax();
}; }; function myajax(){ //01.定制出 xhr对象
var xhr;
//02.能力检测
if(window.XMLHttpRequest){
//非IE浏览器
xhr=new XMLHttpRequest();
}else{
//IE内核
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
var dom=document.getElementById("txtName");
var myspan=document.getElementById("msg");
var myval=dom.value;
//03.构建请求地址
//xhr.open("请求类型","请求地址","是否异步");
xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true); //04.设置回调函数 响应回来的数据
xhr.onreadystatechange=function(){
//什么
if(xhr.readyState==4&&xhr.status==200){
//获取响应数据
var data=xhr.responseText;
if(data=='OK'){ myspan.innerText="用户名已经被注册";
}else{ myspan.innerText="用户名可以注册";
}
}
}; //05.用send真正的发送请求
xhr.send(null); } </script>
</head> <body>
<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
<input type="password" name="txtPwd"/>
</body>
</html>
步骤二：使用ajax发送post请求
servlet不变：在index.jsp中添加
window.onload=function()
{
var dom=document.getElementById("txtName");
dom.onblur=function()
{
myajax();
};
};
function myajax()
{
var xhr;
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}
else
{
xhr=new ActionXObject("Microsoft.XMLHttp");
}
var dom=document.getElementById("txtName");
var myspan=document.getElementById("msg");
var myvalue=dom.value;
xhr.open("post", "<%=path%>/servlet/RegisterServlet?uname="+myvalue,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.onreadystatechange=function()
{
if(xhr.readyState==4&&xhr.status==200)
{
var data=xhr.responseText;
if(data=='OK')
{
myspan.innerText="用户名已经被注册";
}
else
{
myspan.innerText="用户名可用";
}
}
};
xhr.send(data);
}
使用GET和POST方式提交的区别
get：指定XMLHttpRequest对象的open()中的method参数为“get”
指定XMLHttpRequest对象的send方法中的data参数为null
post：1.指定XMLHttpRequest对象的open()方法中method参数为post
2.指定XMLHttpRequest对象要请求的HTTP头信息，该HTTP请求头为固定写法
指定XMLHttpRequest对象的send方法中的data需要传递具体的数据！
步骤三：使用jquery实现ajax
servlet不变，index.jsp代码如下：
//给文本框注册一个失去焦点事件
$(function(){
//等待页面上所有标签完毕后执行
var dom=$("#txtName");
dom.blur(function(){
myjquery();
});
}); function myjquery(){
var dom=$("#txtName");
$.ajax({
url:'<%=path%>/servlet/CheckUserServlet',
type:'post',
data:{uname:dom.val()},
success:function(today){
//today server 打到 浏览器的数据
alert(today);
}
}); }
比javascript方式简单多了，，，，
步骤四：初识json
JSON（即json）简介：
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成（网络传输速率）。
JSON语法规则：
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
//var json={"firstName":"yym","secondName":"myy","thirdName":"ymy"};
/*$.each(json,function(i,dom){
alert(dom);
});*/
/*var json=
{
"people":[
{"firstName":"孙悟空","lastName":"大闹天宫","email":"aaaa"},
{"firstName":"美猴王","lastName":"花果山山大王","email":"bbbb"},
{"firstName":"大圣","lastName":"天上各位尊神尊称他","email":"cccc"},
{"firstName":"弼马温","lastName":"人生第一份工作","email":"DDDD"}
]
};
$.each(json.people,function(i,dom){
alert(dom.firstName+"\n"+dom.lastName);
});*/
var json={
"programmers": [{
"firstName": "Brett",
"lastName": "McLaughlin",
"email": "aaaa"
}, {
"firstName": "Jason",
"lastName": "Hunter",
"email": "bbbb"
}, {
"firstName": "Elliotte",
"lastName": "Harold",
"email": "cccc"
}],
"authors": [{
"firstName": "Isaac",
"lastName": "Asimov",
"genre": "sciencefiction"
}, {
"firstName": "Tad",
"lastName": "Williams",
"genre": "fantasy"
}, {
"firstName": "Frank",
"lastName": "Peretti",
"genre": "christianfiction"
}],
"musicians": [{
"firstName": "Eric",
"lastName": "Clapton",
"instrument": "guitar"
}, {
"firstName": "Sergei",
"lastName": "Rachmaninoff",
"instrument": "piano"
}]
};
$.each(json.programmers,function(i,dom){
alert(dom.firstName+"\n"+dom.lastName);
});
注意：在此换行一直是“/n”,我一直忘记了哈哈！
Ajax讲解的更多相关文章
- ajax讲解：“创建用户”和“用户登录”练习
ajax可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. 接下来,将以例子的形式进行讲解 例一:创建用户 ...
- 原生Ajax讲解
典型的http通信:浏览器向服务器发出请求,服务器向客户端返回响应,浏览器重新加载页面,这种不连续的页面加载方式导致用户的体验变得杂乱,缺乏连贯性. 如: 在一般的web应用程序中,用户填写表单字段然 ...
- 易买网(注册Ajax讲解)
关于注册(用到Ajax) 运用onblur进行时时刷新 创建所需用的Servlet 好了 Ajax其实不是很难 如果还是不懂可以私信我呦-^^-!
- 原生AJAX入门讲解（含实例）
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
- (转)JAVA AJAX教程第三章—AJAX详细讲解
现在开始深入AJAX,这里还是按老思路,理论和实践相结合.这章的内容主要是讲解AJAX步骤详解,下一张将会用一个AJAX技术实现页面提示效果的实例来说明AJAX的实现. 一.AJAX步骤详解 AJAX ...
- 原生AJAX基础讲解及兼容处理
原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...
- AJAX跨域完全讲解
AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候 ...
- AJAX方法讲解
Ajax的方法讲解 Ajax 异步请求,有点: 调高用户的体验度, 降低网络传输量 $.load() //异步加载页面 $.post() Post 异步请求 $.post("url请求地址 ...
- 第三百三十四节，web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息
第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多 ...
随机推荐
- SAP中禁止特定用户更改密码
在SAP管理中,有时一些账号因为是提供给大家作查询用的,受密码强度策略限制,密码不能为空.故密码设为通用后在公司内发布,为避免有些用户更改后造成其他用户无法登陆,我们可在使用TC-SU01,在登录数据 ...
- IOS安全测试
1.本地存储安全 配置文件 缓存 数据库 测试数据 证书数据 2.网络通信安全 http明文通信 https证书认证 敏感参数弱加密 加签/验签策略 外接第三方SDK 外发不明数据 3.源代码安全 日 ...
- Emacs学习心得之 基础配置
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之 基础配置 1.前言2.基础配置 一.前言 本篇博文记录了Emacs的一 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q4-Q5)
Question 4 You are designing a SharePoint 2010 application to store 50 GB of digital assets, includi ...
- Android Animation学习（一） Property Animation原理介绍和API简介
Android Animation学习(一) Property Animation介绍 Android Animation Android framework提供了两种动画系统: property a ...
- 查看Android系统给APP分配的最大堆栈
命令方式: cat /system/build.prop dalvik.vm.heapgrowthlimit=48m dalvik.vm.heapsize=128m 代码方式: Runtime rt= ...
- Android 应用程序的反编译
1.ApkTool工具 安装ApkTool工具,该工具可以解码得到资源文件,但不能得到Java源文件.安装环境:需要安装JRE1.61> 到http://code.google.com/p/an ...
- iOS 学习 - 12.NSMutableAttributedString 计算高度
计算 NSMutableAttributedString 高度,必须要有两个属性 -(void)test{ UILabel *label = [[UILabel alloc]initWithFrame ...
- UITableView全面解析
本文转自:http://www.cocoachina.com/ios/20140922/9710.html 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以 ...
- Android IPC机制之AIDL
什么是AIDL AIDL:Android Interface Definition Language,即Android接口定义语言. Android系统中的进程之间不能共享内存,因此,需要提供一些机制 ...