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地址 有多 ...
随机推荐
- 百度地图SDK 遇到的问题及解决方案
目前项目工作中用到了百度地图sdk,遇到了不少问题,在此记录一下,顺便吐槽下希望百度能把这地图sdk做的更好用一点. 1,开发环境, Xcode6.0 (6A313) + 百度地图 iOS SDK v ...
- android 浅谈Aidl 通讯机制
服务端: 首先是编写一个aidl文件,注意AIDL只支持方法,不能定义静态成员,并且方法也不能有类似public等的修饰符:AIDL运行方法有任何类型的参数和返回值,在java的类型中,以下的类型使用 ...
- OC中的protocol
一. 简单使用 1. 基本用途 可以用来声明一大堆方法(不能声明成员变量) 只要某个类遵守了这个协议,就相当于拥有这个协议中的所有方法声明 只要父类遵守了某个协议,就相当于子类也遵守了 2. 格式 协 ...
- Xcode常用快捷键的使用
熟练使用Xcode的一些快捷方式,会大大加快项目开发的速度.
- UILabel和NSAttributedString那些事
注:通常的label用来现实普通的文字.但是,你常常会遇到这样的情况:一段文字中不仅有文字,也有图片,甚至文字中的某段文字与其他的文字的appearance不一致的情况,这样的一段文字就可以称得上是富 ...
- Mac OS X 删除文件快捷键
今天发现自己还不知道怎么快捷的删除文件,网上找了下相关的资料. 原来删除文件的快捷键是:command+delete(把文件放到废纸篓),对于我这种笔记本用户,确实方便很多哈 还有一个命令也挺有用的: ...
- Reflector 已经out了，试试ILSpy
Reflector是.NET开发中必备的反编译工具.即使没有用在反编译领域,也常常用它来检查程序集的命名规范,命名空间是否合理,组织类型的方法是否需要改善.举例说明,它有一个可以查看程序集完整名称的功 ...
- 世道变了 – 你愿意成为微软认证Linux工程师吗？
随笔世道变了 – 你愿意成为微软认证Linux工程师吗? 世道变了 – 你愿意成为微软认证Linux工程师吗? leixu十二月 14, 2015随笔 2015年12月9日,微软发布了全新的MCS ...
- apache 虚拟主机详细配置：http.conf配置详解
apache 虚拟主机详细配置:http.conf配置详解 Apache的配置文件http.conf参数含义详解 Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd. ...
- 多年前写的文本框扩展控件(有ValueChanging事件等)，已放github
本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 阅读目录 介绍 起因 代码 使用 GitHub ...