ajx技术解析以及模拟jQuery封装
1.后台处理程序
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String username = request.getParameter("username");
String password = request.getParameter("password"); System.out.println(username+"=========="+password); out.print("响应内容-->姓名:" +username+",密码:"+password);
%>
2.get方式请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax实现前后台交互</title>
</head>
<body>
<form action="#" method="">
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<input type="button" value="ajax登录" onclick="tzLogin();" />
</form> <div id="result"></div>
<script type="text/javascript"> function tzLogin(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var params = "?username="+username+"&password="+password+"&method=get"; //创建一个Ajax对象
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
document.getElementById("result").innerText = this.responseText;
} };
//true代表异步
xhr.open("get","login.jsp"+params,true);
xhr.send();
}
</script>
</body>
</html>
3.post方式请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax实现前后台交互</title>
</head>
<body>
<form action="#" method="">
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<input type="button" value="ajax登录" onclick="tzLogin();" />
</form> <div id="result"></div>
<script type="text/javascript"> function tzLogin(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var params = "username="+username+"&password="+password+"&method=post"; //创建一个Ajax对象
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
document.getElementById("result").innerText = this.responseText;
} };
xhr.open("post","login.jsp",true);
//发送数据，如果请求方式是post话send一定要设置参数
//如果get xhr.send(); 如果post send一定要设置参数
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(params);
}
</script>
</body>
</html>
4.模拟jQuery封装Ajax请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax实现前后台交互</title>
</head>
<body>
<form action="#" method="">
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<input type="button" id="button" value="ajax登录" onclick="tzLogin();" />
</form> <div id="result"></div>
<script type="text/javascript">
var $ = {
ajax : function(opts){
//创建一个Ajax对象
var xhr = null; if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
var ids = ["MSXML2.XMLHTTP.3.0","Microsoft.XMLHTTP","MSXML2.XMLHTTP"];
for(var i=0;i<ids.length;i++){
try{
xhr = new ActiveXObject(ids[i]);
break;
}catch(e){ }
}
} xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var text = this.responseText;
if(opts.success) opts.success.call(this,text);
}else{
if(opts.error) opts.error.call(this,"调用有异常");
}
}; var params = "";
for(var k in opts.data){
if(params != "") {
params += "&";
}
params += (k+"="+opts.data[k]);
}
//true代表异步
if(opts.type.toLowerCase() == "get"){
var url = opts.url;
if(params != ""){
url = opts.url+"?"+params;
}
xhr.open("get",url,opts.async);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.send();
}else if(opts.type.toLowerCase() == "post"){
xhr.open("post",opts.url,opts.async);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.send(params);
}
} }; function tzLogin(){ $.ajax({
type: "post",
url: "login.jsp",
data: {
username:document.getElementById("username"),
password:document.getElementById("password")
},
dataType: "json",
async : true,
success: function(data){
document.getElementById("result").innerText = data;
},
error:function(){
document.getElementById("result").innerText = "调用有异常";
}
}); }
</script>
</body>
</html>
5.说明解析
ajax XMLHttpRequest
1.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
XML HttpRequest http请求的一种，传输的数据格式在早期常用XML
它是构建HTTP请求的javascript对象，在早期它是
ActiveX对象形式存在，服务器端和客户端传递异步的问题
早期数据的传递：字符串和XML
实际上，Ajax就是javascript和XML直接建立的一种异步传输的过程
2.创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象的语法：var xhr = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
3.ajax 只不过是另一种Http请求的而已，它和form表单原理是一样的，
只不过不会刷新页面进行的一种异步交互
4.请求方式 get\post
get基于浏览器请求
1.直接在浏览器输入框输入一个地址进行请求
2.点击a链接是一个get请求
3.通过form指明method="get"
4.ajax指明请求方式get
post:form里面method="post"
5.请求的状态和响应异常
请求的状态,readyState
0:未初始化状态
1：载入请求的状态
2:载入完成状态
3:请求交互状态
4：请求完成状态s
可以捕获服务器错误
500服务器连接失败 -- 服务器关闭
404代表页面找不到
405请求方式有问题
200 代表交互成功，正确请求和响应
ajax里面指明post请求
ajx技术解析以及模拟jQuery封装的更多相关文章
- js框架封装，模拟jQuery封装
模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...
- 模拟jquery封装选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript模拟jQuery封装委托事件，兼容IE
var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...
- 模拟jQuery简单封装ajax
/*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...
- 如何用jQuery封装插件
引子 现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢?首 ...
- 模拟jQuery库
用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8" ...
- 仿照jquery封装一个自己的js库（一）
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...
- 学习PHP爬虫--《Webbots、Spiders和Screen Scrapers：技术解析与应用实践(原书第2版)》
<Webbots.Spiders和Screen Scrapers:技术解析与应用实践(原书第2版)> 译者序 前言 第一部分 基础概念和技术 第1章 本书主要内容3 1.1 发现互联网的真 ...
- 干货|爱奇艺CDN巡检系统技术解析
小结: 1. 中心处理系统 /1/将定制后的巡检任务拆分,通过配置与任务分发系统.CMDB*( configuration management database)将派发到边缘拨测系统/2/处理边缘拨 ...
随机推荐
- Attribute在.net编程中的应用
Attribute FYI Link: Attribute在.net编程中的应用(一) Attribute在.net编程中的应用(二) Attribute在.net编程中的应用(三) Attribut ...
- [xsd学习]xsd介绍
一直以来项目中对xml格式的判断使用的都是dtd格式,直到最近才发现,不知何时都已经转为xsd来进行判断和校验,于是今天专门找资料看下,不得不说,对于这类资料的入门,w3cschool真是个不错的资料 ...
- iOS 原生网络请求(推荐使用AFNetWorking库)
. 同步GET请求 //第一步,创建URL NSURL *url = [NSURL URLWithString:@"http://api.hudong.com ...
- Python基础6- 流程控制之if条件语句
Python条件语句是通过判断一条或多条条件语句的执行结果来决定执行哪条代码块的.Python 中if 语句用于控制程序的执行,基本形式为:if 判断条件: 执行语句……else: 执行语句…… #c ...
- HD1394 Minimum Inversion Number
这道题目的意思是:给你一个序列,统计一开始的逆序数的个数,然后依次把第一个元素放到序列末尾,求每次的逆序数个数,求出每次求逆序数里,逆序数最小的那个数 这里需要推一个递推式,就是每次你把第一个元素放到 ...
- BZOJ1931 : [Shoi2007]Permutation 有序的计数
枚举LCP以及下一位变小成什么,统计出剩下的有几个可以在原位置. 然后枚举剩下的至少有几个在原位置,容斥计算答案. 时间复杂度$O(n^3)$. #include<cstdio> type ...
- BZOJ2320 : 最多重复子串
本题就是求重复数最多的字典序最小的$runs$,如果重复数为1,那么做法显然,然后只考虑重复数大于1的情况. 从小到大枚举长度$len$,对于每个关键点$x=i\times len$,有且仅有一个长度 ...
- Android NumberPicker 修改分割线颜色和高度及字体颜色大小
(1)重写NumberPicker已达到修改显示字体颜色大小 public class TextColorNumberPicker extends NumberPicker { public Text ...
- NOIp 2013 #2 花匠 Label：爆0的Water
题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排列得比较别致. 具 ...
- JS中的专业术语
本身虽然是学技术出身,但.....此处省略N个字符 1.Namespace 命名空间 允许开发人员在一个独特, 应用相关的名字的名称下捆绑所有功能的容器. 2.Class类 定义对象的特征.它是对象的 ...