Java基本概念-ajax

最新推荐文章于 2024-04-23 00:29:43 发布

gongchengshiaa

最新推荐文章于 2024-04-23 00:29:43 发布

阅读量288

点赞数

分类专栏： ajax Java JavaScript 文章标签： ajax 省市级联

本文链接：https://blog.csdn.net/gongchengshiaa/article/details/54631439

版权

Java 同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

一 AJAX原理解析

1 浏览器不直接向服务器发出请求，而是通过JavaScript（XMLHttpRequest）调用神奇控件，由神奇控件向服务器发出请求

2 XMLHttpRequest异步向服务器发送请求，即在发送请求和等待服务器回应的过程中，不会阻塞浏览器的正常浏览和JavaScript代码的执

行，发送请求的过程和浏览器的运行可同时运行

3 服务器不需要发送整个HTML页面，只需要返回必须的数据即可

4 js不会等待服务器端返回数据

5 AJAX操作与常规浏览器请求操作的不同

（1）常规操作需要刷新页面，AJAX不需要刷新页面

（2）常规操作在用户操作时会中断，等待新页面下载后继续，AJAX不会中断

（3）常规操作的服务器会返回整个新页面，AJAX服务器只返回需要的数据

二神奇控件（XMLHttpRequest）

1 作用：

（1）能够被js调用，js需要指定请求地址，请求方式与参数，js能够从XMLHttpRequest中得到服务器返回的数据

（2）能够异步请求服务器返回的数据

（3）能够调用js

2 使用XMLHttpRequest向服务器发送请求主要方法

（1）open（请求方式，请求地址，是否为异步请求）

（2）send（请求数据）

（3）当使用post发送请求时，必须要设置请求头http.setRequestHeader("Content-Type", "application/x-www-form-

urlencoded")

3 XMLHttpRequest对象接受回应步骤

（1）使用open方法设置请求内容

（2）设置回调函数

（3）发出请求

（4）反馈服务器状态（多次）

（5）获取相应数据

ajax举例：

一省市级联

jsp代码
function change(e) {
   var xhr=null;
   //创建请求对象
   if(window.XMLHttpRequest){
       xhr = new XMLHttpRequest();

   }else{
       xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }

   xhr.onreadystatechange = callback;
   xhr.open("get", "JsonProvinceServlet?pro="+e.value, true);
   xhr.send();

   function callback(){
       if(xhr.readyState==4 && xhr.status==200){
           var parse = new DOMParser();
           var json = JSON.parse(xhr.responseText);
           //alert(json.length);
           jsonParser(json);
       }
   }
}
function jsonParser(a){
   var body = document.body;

   if (!document.getElementById("city")) {
       var select = document.createElement("select");
       select.setAttribute("id", "city");
       body.appendChild(select);
   }
   var city = document.getElementById("city");
   var temp = "";
   for (var i = 0; i < a.length; i++) {
       var str = "<option value='"+a[i].value+"'>"+a[i].add+"</option>";
       temp += str;
   }
   city.innerHTML = temp;
}
</script>
</head>
<body>
<select id="pro" name="pro" οnchange="change(this)">
<option value="a">甘肃省</option>
<option value="b">陕西省</option>
</select>
</body>

Servlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //获取请求编码
       request.setCharacterEncoding("UTF-8");
       //获取表单数据
       String province = request.getParameter("pro");
       response.setCharacterEncoding("UTF-8");
       List<ProvinceModel> list = new ArrayList<ProvinceModel>();
       if (province.equals("a")) {
           ProvinceModel model = new ProvinceModel();
           model.setAdd("lanzhou");
           model.setValue("11");
           list.add(model);

           ProvinceModel model2 = new ProvinceModel();
           model2.setAdd("庆阳市");
           model2.setValue("12");
           list.add(model2);

           ProvinceModel model3 = new ProvinceModel();
           model3.setAdd("天水市");
           model3.setValue("13");
           list.add(model3);

           ProvinceModel model4 = new ProvinceModel();
           model4.setAdd("张掖市");
           model4.setValue("14");
           list.add(model4);

           ProvinceModel model5 = new ProvinceModel();
           model5.setAdd("白银市");
           model5.setValue("15");
           list.add(model5);
       }else if (province.equals("b")) {
           ProvinceModel model1 = new ProvinceModel();
           model1.setAdd("西安市");
           model1.setValue("21");
           list.add(model1);

           ProvinceModel model2 = new ProvinceModel();
           model2.setAdd("宝鸡市");
           model2.setValue("22");
           list.add(model2);

           ProvinceModel model3 = new ProvinceModel();
           model3.setAdd("渭南市");
           model3.setValue("23");
           list.add(model3);

           ProvinceModel model4 = new ProvinceModel();
           model4.setAdd("榆林市");
           model4.setValue("24");
           list.add(model4);
       }
       JSONArray array = JSONArray.fromObject(list);
       System.out.println(array.toString()+"44");
       response.getWriter().write(array.toString());
   }