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地址 有多 ...
随机推荐
- Android 手机卫士--弹出对话框
在<Android 手机卫士--解析json与消息机制发送不同类型消息>一文中,消息机制发送不同类型的信息还没有完全实现,在出现异常的时候,应该弹出吐司提示异常,代码如下: private ...
- Android自定义控件1
概述 Android已经为我们提供了大量的View供我们使用,但是可能有时候这些组件不能满足我们的需求,这时候就需要自定义控件了.自定义控件对于初学者总是感觉是一种复杂的技术.因为里面涉及到的知识点会 ...
- 关于插件管理器Alcatraz
如何安装插件管理器Alcatraz:去github下载一个Alcatraz安装包,然后运行一下. 会弹出 记得选择左边的Load Bundle 退出Xcode 重新运行一下就OK 了. 然后就可以看到 ...
- 【代码笔记】iOS-等待动画
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- C语言中的函数与指针
1. 为什么需要函数? 函数就是功能的封装. 函数就是为了实现某个功能而编写的一段代码 scanf() , printf() 2.函数优点: 代码更简洁 代码复用 如果业务逻辑变化,只把相应的 ...
- MVC 生成图片，下载文件
/// <summary> /// 生成图片 /// </summary> /// <param name="collection"></ ...
- Android 自定义控件（一）
本文用一个简单的例子来说明一下自定义控件的步骤实现,自定义控件有几种实现类型,分别为继承自view完全自定义,继承现有的 控件实现特定效果,继承viewgroup实现布局类等: 本文研究的是继承自vi ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
- CommonJS的模块规范
CommonJS对模块的定义十分简单,主要分为模块引用.模块定义和模块标识. 1.模块引用 var math = require('math');//这个方法接受模块标识,以此引入一个模块的API到当 ...
- php示例代码之empty函数
1 2 3 4 5 6 7 8 9 10 11 <?php $testVar=0; if(empty($testVar)) { echo 'msg:true'; } ...