Ajax简介
Ajax的引入
ajax的出现是为了解决什么问题？
我们之前所接触到的东西，如果改变局部页面的东西，我们的做法是将这个页面再展示一遍，将局部内容进行修改。这本身就是很不合理，所以出现了ajax。
Ajax的跳转对比
之前从一个页面转到一个页面通常会使用下面的方式：
<a href=""><a>
window.location.href=""
<form action="URL">
他们都有一个共同点就是会改变地址栏的信息，也就是说会刷新整个页面。而ajax则不会改变地址栏的信息。
Ajax原理
之前在servlet处理请求都是处理完就直接响应给浏览器让浏览器进行页面的刷新。
ajax之所以能够做到局部刷新正是因为servlet的请求是在js中进行发出的，所以说servlet负责的对象就是js的那个函数。即使servlet执行完了还是不会刷新页面因为js的内容并没有执行完呀。
那么是谁可以在js向服务器发送请求呢？这个东西就是Ajax的引擎对象
//针对低版本做出判断，高版本的ie好像也支持第一种方式了 if(window.XMLHttpRequest){//火狐 ajax= new XMLHttpRequest(); }else if(window.ActiveXObject){//ie ajax=new ActiveXObject("Msxml2.XMLHTTP"); }
简而言之：通过浏览器的XmlHttpRequest(Ajax引擎)对象来向服务器(发送异步请求)并(接收服务器)的响应数据，然后用javascript来操作DOM，实现动态局部刷新。所以Ajax不是什么新的技术啦。
Ajax请求
发送函数：（引擎对象名）.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
bstrMethod（Http方法）：一般就是POST或者GET当然还有PUT及PROPFIND
bstrUrl：要跳转的Servlet别名或者jsp、html名
varAsync：指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
一般用不上后面的参数，大概是加密的
bstrUser[可选]：如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
bstrPassword[可选]：验证信息中的密码部分，如果用户名为空，则此值将被忽略。
同步请求：就是在接收完数据之前就会执行它下面的语句
异步请求：不许再接收完数据之后才会继续向西执行js
POST请求：
ajax.open("post","ajax");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post方式需要设置请求头，get请求不需要
ajax.send("name=张三&pwd=123");//请求实体，post请求需要，如果是get请求里面写null
GET请求：
ajax.open("get","ajax?name=张三 &pwd=123");
ajax.send(null);
状态码
一个是ajax的状态码，一个是Http状态码
请求的步骤
1.创建ajax引擎对象（new XMLHttpRequest()）
2.复写onreadyststement
3.配置请求信息（GET、POST）
4.发送请求信息
jsp代码：
<%@ 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>Insert title here</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <script type="text/javascript"> function getData() { //创建ajax引擎对象 var ajax; //var data=document.getElementById("tid").value; //data="name="+data; if(window.XMLHttpRequest){//火狐 ajax= new XMLHttpRequest(); }else if(window.ActiveXObject){//ie ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadyststement ajax.onreadystatechange = function () { //判断ajax状态码 if(ajax.readyState==4){ //alert(5); //判断响应状态码（200、405、404、500） if(ajax.status==200){ //获取响应内容（相应内容的格式） var res=ajax.responseText; alert(res); //获取元素对象 var div=document.getElementById("did"); div.innerHTML=res; }else if(ajax.status==404){ var div=document.getElementById("did"); div.innerHTML="请求资源不存在"; }else if(ajax.status==500){ var div=document.getElementById("did"); div.innerHTML="服务器繁忙"; }else{//加载bug var div=document.getElementById("did"); //div.innerHTML="<img src='caling.gif' width='150px' height='150px'>"; /*var d=document.createElement("img"); d.style.height="150px"; d.style.width="150px"; d.style.src="caling.gif"; div.append(d);*/ } } } //发送请求 //设置为异步，就是请求结果得到再执行后面的js代码 //get请求方式 //ajax.open("get","ajax?name=张三 &pwd=123",false/*,async,username,password*/); // //ajax.open("get","ajax?"+data,false/*,async,username,password*/); //ajax.send(null); //如果是post请求send后面写请求数据 ajax.open("post","ajax"); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("name=张三&pwd=123"); //alert("haha"); } </script> <style> #did{ height:150px; width:150px; margin:5px; border:solid 1px red; } </style> <body> <input type="text" id="tid"/> <input type="button" value="测试" onclick="getData()"> <div id="did"></div> </body> </html>
Servlet代码：
package com.zyb.Servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; //xml3.0配置方式 @WebServlet("/ajax") public class AjaxServlet extends HttpServlet{ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置请求编码格式 //设置响应编码格式 resp.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); try { Thread.sleep(3000); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } String name=new String (req.getParameter("name").getBytes("iso8859-1"),"utf-8"); System.out.println(name+" "+req.getParameter("pwd")); resp.getWriter().print("天气不错");//返回给前台的数据 //不能用resp.getWriter().write("天气不错"); //获取请求信息 //处理请求 //响应处理结果 } }
结果
不用管哪个搜索栏，这个案例只是与按钮有关，当点击按钮js的引擎对象就会向服务器发请求，Servlet处理完后就会将数据返回，这个过程并不会刷新界面，这个数据我是设死的，所以就是这个效果。
bug:在Servlet中我专门做了一个延时是想看到gif的加载效果，但是却怎麽都弄不出来，图片路径是对的，我放在div的下放就可以但就是不可以放在里面，我都。。。。
