Ajax，Json学习笔记
Ajax
1：Ajax概念
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
##:2：Ajax技术
1：Ajax技术是一组原有技术的综合应用，设计技术如下：以XMLHttpRequest为核心发送请求和接收响应。
2：以JavaScript语言为基础使用XMLHttpRequest。
3：以XML或JSON作为数据交互格式。
4：以HTML和CSS作为数据展示（渲染）
3：原理图
4：Ajax交互和传统交互
1：传统交互（同步）：浏览器发送HTTP请求，然后由浏览器直接接收服务器返回结果呈现在浏览器页面上。2：Ajax交互（异步）：浏览器利用js调用XMLHttpRequest对象发送HTTP请求，然后在利用XMLHttpRequest接收服务器返回结果，然后还需利用js将结果显示到浏览器页面上。3：如何区分Ajax请求和传统请求：（1）：请求的Header格式不同，Ajax请求部分多一组参数值x-requested-wih：XMLHttpRequest。如果存在该参数就可以认为是ajax：否则就可以认为是传统表单或超链接。（2）：服务器响应结果不同传统：服务器一般都会去调用servlet或jsp生成一个html界面给浏览器，然后浏览器显示。Ajax：服务器一般会调用servlet处理，然后生成一个JSON或XML字符串结果给XMLHttpRequest。（3）：页面刷新不同传统：整个页面刷新。Ajax：局部刷新。（4）：同步和异步不同传统：同步式交互请求1----->响应1------>请求2------->响应2Ajax：异步式交互请求1----->请求2------>响应1------>响应2
5：Ajax作用和优点
为什么使用Ajax：页面局部刷新。页面不改变，异步请求和响应。Ajax优点：使用户操作更连接，提升用户体验。Ajax交互传输数据量小，提升程序性能。异步处理，可以进行异步加载和请求处理。减少整个页面刷新频率。
6：Ajax使用
1:创建一个XMLHttprequest对象发送请求。
属于客户端的js编程function sendRequest(){var xhr = null;//1.创建XMLHttpRequest对象if(window.XMLHttpRequest){//支持chrom,IE 7 8 9xhr= new XMLHttpRequest();}else{//IE 5 6xhr = new ActiveXObject("Microssft.XMLHTTP")}//2.创建一个HTTP请求/*xhr.open("get","hello.do",true);//设置一个回调处理函数xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){//判断回调状态是否成功var msg = xhr.responseText;//获取服务器返回的字符串信息document.getElementById("msg").innerHTML = msg;document.getElementById("msg").style.color="red";}}*///3.发送一个ajax请求xhr.send(null);}
2.服务器端处理（servlet/SP）属于服务器端Java编程public class HelloServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("ajax请求处理");//输出一个消息响应ajax】response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();Random random = new Random();out.println("hello world:"+random.nextInt(100));out.close();}}
3.解析服务器返回数据结果，显示到页面属于客户端js编程xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){//判断回调状态是否成功var msg = xhr.responseText;//获取服务器返回的字符串信息document.getElementById("msg").innerHTML = msg;document.getElementById("msg").style.color="red";}}//3.发送一个ajax请求xhr.send(null);
4.将服务器端获取到的内容显示到jsp页面
<body><input type="button" value = "显示信息" onclick="showMsg()"><div id="msg"></div>
</body>
7：案列：利用ajax显示城市列表
(1)创建一个XMLHttprequest对象发送请求。
<script type="text/javascript">function showTable(){document.getElementById("tb").innerHTML="数据加载中....";var xhr = null;//1.创建XMLHttpRequest对象if(window.XMLHttpRequest){//支持chrom,IE 7 8 9xhr= new XMLHttpRequest();}else{//IE 5 6xhr = new ActiveXObject("Microssft.XMLHTTP")}//创建一个get请求xhr.open("get","list.do");xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){//判断回调状态是否成功var msg = xhr.responseText;//获取服务器返回的字符串信息//document.getElementById("msg").innerHTML = msg;//将字符串转换成JSON对象数组var city = JSON.parse(msg);//循环遍历JSON对象for (var i in city) {var row = document.getElementById("tb").insertRow(i);row.insertCell(0).innerHTML = city[i].id;row.insertCell(1).innerHTML = city[i].name;}} }//发送请求xhr.send(null);}
</script>
2.创建servlet
public class ListServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();String data = "[{\"id\":1,\"name\":\"北京\"},{\"id\":2,\"name\":\"上海\"},{\"id\":3,\"name\":\"昆明\"}]";out.print(data);out.close();}
}
3.在JSP页面显示
<body><input type="button" value = "加载列表" onclick="showTable()"><table id="tb"></table></body>
JSON
1：JSON概念
JavaScript Object Notation 是JavaScript对象格式，属于JavaScript语言数据类型。{"key":valuem,"key":value} key是字符串，value可以是任意格式。访问value可以使用变量.key获取。
2：JSON字符串如何转换为JSON对象
(1).使用JSON.parse(字符串)
//服务器返回了一个JSON字符串var data = '{"id":1,"name":"上海"}';//将JSON字符串转换成JSON对象var obj_data = JSON.parse(data);
(2).使用eval("("+字符串+")")var data = '{"id":1,"name":"上海"}';//将JSON字符串转换成JSON对象var obj_data = eval("("+data+")");
(3).使用第三方js库列入json.js，query.js
3：如何将java对象转换成JSON对象
（1）:使用gson.jar工具包
转换单个对象
public static void main(String[] args) {City city = new City(1,"南京");Gson gson = new Gson();//将city对象转换成json字符串{"id":1,"name":"南京"}String json = gson.toJson(city);System.out.println(json);}
转换多个对象
public static void main(String[] args) {City city = new City(1,"南京");City city2 = new City(2,"北京");Gson gson = new Gson();List<City> list = new ArrayList<City>();list.add(city);list.add(city2);json = gson.toJson(list);System.out.println(json);}
（2）:使用json-lib.jar工具包
(1)转换单个对象
public class TestJosnlib {public static void main(String[] args) {City city = new City(1,"南京");City city2 = new City(2,"北京");JSONObject json = JSONObject.fromObject(city);String string = json.toString();System.out.println(string);}
}(2)转换集合
public class TestJosnlib {public static void main(String[] args) {City city = new City(1,"南京");City city2 = new City(2,"北京");List<City> list = new ArrayList<City>();list.add(city);list.add(city2);JSONArry json = JSONOArry.fromObject(list);String string = json.toString();System.out.println(string);}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！