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封装的更多相关文章

  1. js框架封装，模拟jQuery封装

    模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...

  2. 模拟jquery封装选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. javascript模拟jQuery封装委托事件，兼容IE

    var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...

  4. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  5. 如何用jQuery封装插件

    引子 现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢?首 ...

  6. 模拟jQuery库

    用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8" ...

  7. 仿照jquery封装一个自己的js库（一）

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  8. 学习PHP爬虫--《Webbots、Spiders和Screen Scrapers：技术解析与应用实践(原书第2版)》

    <Webbots.Spiders和Screen Scrapers:技术解析与应用实践(原书第2版)> 译者序 前言 第一部分 基础概念和技术 第1章 本书主要内容3 1.1 发现互联网的真 ...

  9. 干货|爱奇艺CDN巡检系统技术解析

    小结: 1. 中心处理系统 /1/将定制后的巡检任务拆分,通过配置与任务分发系统.CMDB*( configuration management database)将派发到边缘拨测系统/2/处理边缘拨 ...

随机推荐

  1. app分享时判断手机是否已安装微信或QQ客户端

    /** * 判断 用户是否安装微信客户端 */ public static boolean isWeixinAvilible(Context context) { final PackageManag ...

  2. JavaScript设计模式——单体模式

    一:单体模式简介: 是什么:将代码组织为一个逻辑单元,这个单元中的代码通过单一的变量进行访问.只要单体对象存在一份实例,就可以确信自己的所有代码使用的是同样的全局资源. 用途:1.用来划分命名空间,减 ...

  3. SpringHttpInvoker解析2-服务端实现

    主要的配置文件 <!-- 在Spring的httpInvoker服务 --> <bean id="httpInvokerUserService" class=&q ...

  4. spring.net tx:advice 和 aop:config 配置事务 匹配名字的方法管理事务

    在网上找到的都是java里的配置方式,后来认真读了下spring.net的帮助文档,解决了这个问题:现在把我的server层的配置文件copy出来: <?xml version="1. ...

  5. AngularJS 包含HTML文件

    类似于python tornado的include方法,同样是可以在一个html文件中加载另外一个html文件,这样可以不用重复的写一些几乎不改变的代码. 首先创建两个文件,然后代码如下: <! ...

  6. 为什么模板函数的声明和实现都放在.h文件中

    当你不使用这个模板函数或模板类,编译器并不实例化它,当你使用时,编译器需要实例化它,因为编译器是一次只能处理一个编译单元,也就是一次处理一个cpp文件,所以实例化时需要看到该模板的完整定义.所以都放在 ...

  7. HDU4609 3-idiots（母函数 + FFT）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4609 Description King OMeGa catched three men wh ...

  8. C#生成PDF总结

    (一)C#生成PDF总结 (1)iTextSharp控件对iTextSharp研究还可以表格.文字.各种GDI对象,图片,水印,文字旋转(2)aspose的控件(3)PDF Library这个类库(只 ...

  9. Oracle错误 ORA-12560如何解决

    造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个:1.监听服务没有起起来.windows平台个一如下操作:开始---程序---管理工具---服务,打开服务面板, 启动oracleh ...

  10. [Word]将word文件中的软回车符[↓]替换为硬回车符

    Ctrl+H,替换对话框 搜索:^l 替换:^p 确定替换即可.