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地址 有多 ...
随机推荐
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径
本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...
- SharePoint Online 创建门户网站系列之首页布局
前 言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Onlin ...
- leetcode 第188题，我的解法，Best Time to Buy and Sell Stock IV
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- 【代码笔记】iOS-剧幕拉开形的首页
一,工程图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> #import "UIImage+SplitImageInto ...
- 【代码笔记】iOS-关于UIFont的一些define
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- 【代码笔记】iOS-带索引的tableView
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- iis中限制访问某个文件或某个类型的文件配置方法
Note:此处不是权限设置问题,此处不是权限设置问题,此处不是权限设置问题!只是出于数据或者网络安全,禁止扫描工具直接扫描到某些包含敏感信息的文件,尤其比如日志.配置等 默认ASP.NET已经考虑到了 ...
- Java的SPI机制与简单的示例
一.SPI机制 这里先说下SPI的一个概念,SPI英文为Service Provider Interface单从字面可以理解为Service提供者接口,正如从SPI的名字去理解SPI就是Service ...
- IIS 500.19 错误
HTTP 错误 500.19 - Internal Server Error 错误代码 0x80070021 配置错误 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默 ...
- CentOS 7.2安装Zabbix 3.2全攻略
放在最前面:鉴于网上爬虫猖獗,博客被盗时有发生,这里需要来个链接,大家请认准来自博客园的Scoter:http://www.cnblogs.com/scoter2008 1.安装环境:VMware虚拟 ...