首页 > 代码库 > 【JavaScript】浅析ajax的使用
【JavaScript】浅析ajax的使用
目录结构：
<script type="text/javascript">// </script>
contents structure [-]
- Ajax简介
- Ajax的工作原理
- Ajax的使用步骤
- 使用原生的js代码
- 使用JQuery代码
- JQuery中常用的Ajax函数
- $.ajax()函数
- $.get()函数
- $.post()函数
- $.getJSON()函数
- Java对JSON的解析
- 将JSON字符串封装为Java对象
- 将Java对象转化为JSON字符串
- 案例
- 查询天气的Demo
1,Ajax简介
Ajax是Asynchronous JavaScript and XML（异步的JavaScript和XML）的简介,Ajax并不是一门新的编程语言，而是一种使用现有标准的新方法。它能够在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
2,Ajax工作原理
通过这个原理图，我们可以看出我们写的javascript代码首先会经过ajax引擎，由ajax引擎负责和server进行通信，再将通信的结果返回给浏览器。这样就不需要刷新整个网页，从而实现向服务器请求数据。
3,Ajax的使用步骤
3.1,使用原生js
1.创建XMLHttpRequest对象
所有现代的浏览器都内建了XMLHttpRequest对象，创建的语法为： var xmlhttp=new XMLHttpRequest(); 。
老版本的IE5,IE6使用ActiveX对象，语法为： var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 。
2.传入回调函数onreadystatechange
xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ //document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }}
readState的状态码：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status的状态码：
- 200: 请求成功
- 302:请求重定向
- 404: 资源未找到
- 500:服务器错误
3.向服务器发送请求
xmlhttp.open(Method,URL,async);xmlhttp.send();这里涉及到参数的问题，如果是使用POST请求提交参数，那么参数需要在send()方法中传入，如果使用GET请求提交参数，那么参数需要拼接到URL后面。
4.案例
html文件：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户登录</title><script type="text/javascript">function userSubmit(){ //创建对象 var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //传入回调函数onreadystatechange xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){//请求成功 document.getElementById("logininfo").innerHTML=xmlhttp.responseText; } } //发送请求 xmlhttp.open("POST","login.do",true); //如果希望通过POST传输数据，那么应该先通过setRequestHeader()添加Http头数据 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var unamevalue=http://www.mamicode.com/document.getElementById("unameid").value; var upassvalue=http://www.mamicode.com/document.getElementById("upassid").value; xmlhttp.send("uname="+unamevalue+"&upass="+upassvalue);}</script></head><body><div>请输入用户名：<input type="text" id="unameid" name="uname"/><p><p>请输入密码：<input type="password" id="upassid" name="upass"/><p><p><input type="button" value="http://www.mamicode.com/点击我" onclick="userSubmit()"/><p><P><span id="logininfo"></span></div></body></html>
servlet文件：
package cn.user.login;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;/** */@WebServlet("/login.do")public class UserLogin extends HttpServlet { /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String name=request.getParameter("uname"); String password=request.getParameter("upass"); //进行数据库的查询，对比name和password //此处省略对数据库的查询，使用name=张三,password=123456; if("张三".equals(name) && "123456".equals(password)){ response.getWriter().append("登录成功"); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }}
上面的代码如果需要使用GET请求(参数应该拼接到url上)，那么将上面的文件改为，
html文件：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户登录</title><script type="text/javascript">function userSubmit(){ //创建对象 var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //传入回调函数onreadystatechange xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){//请求成功 document.getElementById("logininfo").innerHTML=xmlhttp.responseText; } } var unamevalue=document.getElementById("unameid").value; var upassvalue=document.getElementById("upassid").value; //发送请求 xmlhttp.open("GET","login.do?uname="+unamevalue+"&upass="+upassvalue,true); xmlhttp.send();}</script></head><body><div>请输入用户名：<input type="text" id="unameid" name="uname"/><p><p>请输入密码：<input type="password" id="upassid" name="upass"/><p><p><input type="button" value="http://www.mamicode.com/点击我" onclick="userSubmit()"/><p><P><span id="logininfo"></span></div></body></html>
servlet文件：
package cn.user.login;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;/** */@WebServlet("/login.do")public class UserLogin extends HttpServlet { /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String name=new String(request.getParameter("uname").getBytes("ISO-8859-1"),"utf-8"); String password=new String(request.getParameter("upass").getBytes("ISO-8859-1"),"utf-8"); //进行数据库的查询，对比name和password //此处省略对数据库的查询，使用name=张三,password=123456; if("张三".equals(name) && "123456".equals(password)){ response.getWriter().append("登录成功"); }else{ response.getWriter().append("登录失败"); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }}
3.2,使用JQuery
上面使用原生的js代码过于繁琐，jQuery对ajax进行了封装，提供了方法，比如常用的：$.ajax(),$.get(),$.post(),$.getJSON()方法。
下面使用$.ajax()函数进行演示：
html代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax测试</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".submitButton").click(function(){ $.ajax({ url:"login.do?uname="+$(".unameclass").val()+"&upass="+$(".unamepass").val(), type:"GET", dataType:"JSON", async:"true", success:function(res){ $(".logininfo").html(res.result.logininfo); }, error:function(xhr){ alert("错误提示： " + xhr.status + " " + xhr.statusText); } }); });})</script></head><body><div> 用户名:<input type="text" class="unameclass" /><p><p> 密码:<input type="text" class="unamepass" /><p><p> <input type="button" value="提交" class="submitButton"/><p><p> <span class="logininfo"></span></div></body></html>
servlet代码：
package cn.user.login;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;/** */@WebServlet("/login.do")public class UserLogin extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String name=new String(request.getParameter("uname").getBytes("ISO-8859-1"),"utf-8"); String password=new String(request.getParameter("upass").getBytes("ISO-8859-1"),"utf-8"); //进行数据库的查询，对比name和password //此处省略对数据库的查询，使用name=张三,password=123456; int errorCode;//错误码，0表示无错误，1表示有错误 Map map1=new HashMap<>(); Map<String,String> map2=new HashMap<String,String>(); if("张三".equals(name) && "123456".equals(password)){ errorCode=0; map2.put("logininfo", "登录成功"); }else{ errorCode=1; map2.put("logininfo", "登录失败"); } map1.put("errorcode", errorCode); map1.put("result", map2); //将Map集合转化为JSON字符串 String strjson=new Gson().toJson(map1); response.getWriter().append(strjson); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }}
上面的servlet代码，将Map集合转化为了json字符串，首先需要导入 gson-2.3.1.jar 包，关于这种方式笔者在下面还会讲解。如果我们不采用Map集合转化为json字符串的方式，那么我们也手动拼接字符串的方法，只不过这种方法在处理数据量大的json数据时，显得力不从心。
4,JQuery中常用的Ajax函数
4.1, $.ajax()函数
在上面的案例中，我们也使用了ajax函数，那里是使用GET请求的方式，下面我们使用POST方式
html页面：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax测试</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".submitButton").click(function(){ $.ajax({ url:"login.do", type:"POST", data:{"uname":$(".unameclass").val(),"upass":$(".unamepass").val()}, dataType:"JSON", async:"true", success:function(res){ $(".logininfo").html(res.result.logininfo); }, error:function(xhr){ alert("错误提示： " + xhr.status + " " + xhr.statusText); } }); });})</script></head><body><div> 用户名:<input type="text" class="unameclass" /><p><p> 密码:<input type="text" class="unamepass" /><p><p> <input type="button" value="提交" class="submitButton"/><p><p> <span class="logininfo"></span></div></body></html>
servlet页面：
package cn.user.login;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;/** */@WebServlet("/login.do")public class UserLogin extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8"); String name=request.getParameter("uname"); String password=request.getParameter("upass"); //进行数据库的查询，对比name和password //此处省略对数据库的查询，使用name=张三,password=123456; int errorCode;//错误码，0表示无错误，1表示有错误 Map map1=new HashMap<>(); Map<String,String> map2=new HashMap<String,String>(); if("张三".equals(name) && "123456".equals(password)){ errorCode=0; map2.put("logininfo", "登录成功"); }else{ errorCode=1; map2.put("logininfo", "登录失败"); } map1.put("errorcode", errorCode); map1.put("result", map2); //将Map集合转化为JSON字符串 String strjson=new Gson().toJson(map1); response.getWriter().append(strjson); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }}
4.2, $.get()函数
这个函数表明请求数据的方式为GET，请求的数据但是不需要添加到url中，该函数中专门有参数接受参数。
html页面：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax测试</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".submitButton").click(function(){ $.get( "login.do", {"uname":$(".unameclass").val(),"upass":$(".unamepass").val()}, function(res){ $(".logininfo").html(res.result.logininfo); }, "JSON" ); });})</script></head><body><div> 用户名:<input type="text" class="unameclass" /><p><p> 密码:<input type="text" class="unamepass" /><p><p> <input type="button" value="提交" class="submitButton"/><p><p> <span class="logininfo"></span></div></body></html>
servlet页面：
package cn.user.login;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;/** */@WebServlet("/login.do")public class UserLogin extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String name=new String(request.getParameter("uname").getBytes("ISO-8859-1"),"utf-8"); String password=new String(request.getParameter("upass").getBytes("ISO-8859-1"),"utf-8"); //进行数据库的查询，对比name和password //此处省略对数据库的查询，使用name=张三,password=123456; int errorCode;//错误码，0表示无错误，1表示有错误 Map map1=new HashMap<>(); Map<String,String> map2=new HashMap<String,String>(); if("张三".equals(name) && "123456".equals(password)){ errorCode=0; map2.put("logininfo", "登录成功"); }else{ errorCode=1; map2.put("logininfo", "登录失败"); } map1.put("errorcode", errorCode); map1.put("result", map2); //将Map集合转化为JSON字符串 String strjson=new Gson().toJson(map1); response.getWriter().append(strjson); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }}
4.3, $.post()函数
html页面：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax测试</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".submitButton").click(function(){ $.post( "login.do", {"uname":$(".unameclass").val(),"upass":$(".unamepass").val()}, function(res){ $(".logininfo").html(res.result.logininfo); }, "JSON" ); });})</script></head><body><div> 用户名:<input type="text" class="unameclass" /><p><p> 密码:<input type="text" class="unamepass" /><p><p> <input type="button" value="提交" class="submitButton"/><p><p> <span class="logininfo"></span></div></body></html>
servlet页面：
package cn.user.login;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;/** */@WebServlet("/login.do")public class UserLogin extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8"); String name=request.getParameter("uname"); String password=request.getParameter("upass"); //进行数据库的查询，对比name和password //此处省略对数据库的查询，使用name=张三,password=123456; int errorCode;//错误码，0表示无错误，1表示有错误 Map map1=new HashMap<>(); Map<String,String> map2=new HashMap<String,String>(); if("张三".equals(name) && "123456".equals(password)){ errorCode=0; map2.put("logininfo", "登录成功"); }else{ errorCode=1; map2.put("logininfo", "登录失败"); } map1.put("errorcode", errorCode); map1.put("result", map2); //将Map集合转化为JSON字符串 String strjson=new Gson().toJson(map1); response.getWriter().append(strjson); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); }}
4.4, $.getJSON()函数
这个函数就是指定$.get()函数返回数据的类型是JSON，只需要将$.get()函数案例中html页面改为：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax测试</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".submitButton").click(function(){ $.getJSON( "login.do", {"uname":$(".unameclass").val(),"upass":$(".unamepass").val()}, function(res){ $(".logininfo").html(res.result.logininfo); }, ); });})</script></head><body><div> 用户名:<input type="text" class="unameclass" /><p><p> 密码:<input type="text" class="unamepass" /><p><p> <input type="button" value="提交" class="submitButton"/><p><p> <span class="logininfo"></span></div></body></html>
5,java对于JSON的解析
因为json字符串和java中的Map集合对象非常类似，两者之间可以相互转化，不过之前我们先需要导包 gson.jar
5.1,将JSON字符串封装为java对象
将字符串转化为Map集合
/* * 参数1. 要转换为对象的JSON格式字符串 * 参数2. 要转换的对象的类信息*/ ClassObject = GsonInstance.fromJSON(JSON字符串,Class);
5.2,将java对象转化为JSON字符串
将字符串转化字符串使用函数
String str_json=GsonInstance.toJson(Map map);
下面通过java代码来看看：
package cn.gson.test;import java.util.HashMap;import java.util.Map;import com.google.gson.Gson;public class GSON_TEST { public static void main(String[] args) { Map map1=new HashMap(); Map map2=new HashMap(); map2.put("info", "测试json"); map1.put("error", "no"); map1.put("detail", map2); Gson gsoninstance=new Gson(); //将map集合转化为json字符串 String strjson=gsoninstance.toJson(map1); System.out.println(strjson);//{"detail":{"info":"测试json"},"error":"no"} Map map3=new HashMap(); map3=gsoninstance.fromJson(strjson, Map.class); System.out.println(map3);//{detail={info=测试json}, error=no} }}
java对于JSON的解析不仅仅只有这一种方式，下面查询天气的demo，我们使用另一种将json字符串转化为java中Map集合
6,案例
6.1,查询天气的Demo
首先我们需要导入json.jar包，
项目文件结构图片：
html页面：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>天气查询</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".submit").click(function(){ $.ajax({ url:"weather.do", data:{"cityname":$(".city").val()}, dataType:"JSON", type:"POST", success:function(result){ $(".queryWeather").html(result.result); } }); });});</script></head><body><div> 请输出城市名称：<input class="city" type="text" name="cityname"/><p> <button class="submit" >提交</button><p><p> 你所查询的城市天气情况：<span class="queryWeather"></span></div></body></html>
java文件：
package cn.xdl.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;import cn.xdl.util.NetUtil;/** * Servlet implementation class Servlet1 */@WebServlet("/weather.do")public class Servlet1 extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8");// response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); String city=request.getParameter("cityname"); String result = null; if(city==null || city.length()==0){ //城市没传递 //报错 result = "{\"errorCode\":-1}"; }else{ try { result = NetUtil.toJSON("http://op.juhe.cn/onebox/weather/query","cityname="+city+"&key=633a2171bde0bf871680e74f1455757e"); } catch (Exception e) { //解析聚合服务器的JSON 出现了错误 result = "{\"errorCode\":-2}"; } } response.getWriter().append(result); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); }}
package cn.xdl.util;import java.io.BufferedReader;import java.io.InputStream;import java.io.InputStreamReader;import java.io.OutputStream;import java.io.OutputStreamWriter;import java.io.PrintWriter;import java.net.HttpURLConnection;import java.net.MalformedURLException;import java.net.URL;import java.net.URLConnection;import org.json.JSONArray;import org.json.JSONObject;public class NetUtil { /** * 这是一个工具, 可以模拟表单 读取参数1 所指定的网址内容 * @param para * @param url * @return * @throws Exception */ public static String readInterface(String urlStr, String para) throws Exception { //java中的统一资源定位器的抽象表示形式 URL url = new URL(urlStr); //打开连接 , 并获取连接对象 HttpURLConnection conn = (HttpURLConnection) url.openConnection(); //开始连接 : 这个步骤 可以省略 ,会自动进行连接 //conn.connect(); conn.setRequestMethod("POST"); //开启写流 conn.setDoOutput(true); // OutputStream os = conn.getOutputStream(); //转换写流为打印流, 并指定打印的编码格式 PrintWriter pw = new PrintWriter(new OutputStreamWriter(os, "utf-8")); //开始向服务器输出一些参数 pw.print(para); pw.close(); InputStream is = conn.getInputStream(); //下面的操作 就是IO阶段的知识点了 , 上面的INputStream就是读取网络地址资源的输入流 //1. 将字节读流,转换为字符流, 并加入缓冲 BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8")); //2. 循环读取 StringBuffer sb = new StringBuffer(); //每次读取一行, 所存储的临时位置 String text = null; while((text = br.readLine())!=null){ sb.append(text); } br.close(); return sb.toString(); } /** * 专门用来读取天气预报, 转换JSON类型的 * @param url * @return * @throws Exception */ public static String toJSON(String url,String para) throws Exception{ String text = readInterface(url,para); /* * 依次解析json数据 * 注意：取出的每一个名称都应该有对应有字符，因此是使用这种方法之前应该对JSON数据的情况很了解 * 如果需要取的是一个对象，那么应该使用getJSONObject()方法 * 如果需要取得是一个数组，那么应该使用getJSONArray()方法 */ JSONObject obj = new JSONObject(text); JSONObject result = obj.getJSONObject("result"); JSONObject data = result.getJSONObject("data"); JSONArray weather = data.getJSONArray("weather"); JSONObject weather_01 = weather.getJSONObject(0); JSONObject info = weather_01.getJSONObject("info"); //白天的天气 JSONArray day = info.getJSONArray("day"); //晚上的天气 JSONArray night = info.getJSONArray("night"); String dayText = null; if(day.getString(1).equals(night.getString(1))){ dayText = day.getString(1); }else{ dayText = day.getString(1)+"转"+night.getString(1); } return "{\"errorCode\":0,\"result\":[\""+dayText+"\",\""+day.getString(2)+"-"+night.getString(2)+"\"]}"; }}
这里查询的天气的接口是免费的，但是这个接口有连接数量的限制，如果读者得到连接数量达到最大的信息，那么隔天再试就可以了。
本文为博主原创，转载请注明出处。
【JavaScript】浅析ajax的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。