JavaScript - Ajax

Posted 2020-12-21 yc0014

1.同步异步

同步：在某一段时间内，依次执行-->并行
异步：在某一时间点上，同时执行-->并发
AJAX：异步的局部刷新技术

2.优缺点

优点：

• 增强用户体验
• 因为服务器无需在响应整个页面，只需要响应部分内容所以减轻服务器压力

缺点：

• ajax不能应用在所有场景
• 无端的增多了对服务器的访问次数，给服务器带来了压力

3.创建http，请求获取ajax

function xmlHttpRequest()
{
    xmlhttp=null;
        if (window.XMLHttpRequest)
          {// code for all new browsers
          xmlhttp=new XMLHttpRequest();
          }
        else if (window.ActiveXObject)
          {// code for IE5 and IE6
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
         return xmlhttp;
}

4.JS中ajks代码格式

onload-加载 onblur-失去焦点 open-打开 send- undefined-未定义 console.log-打印 innerhtml-在浏览器指定地点显示
带有var的是局部变量，没有var的是全局变量
注意：
在后台处理的时候out.print后不能加ln
在后台处理的时候不能写转发和重定向

window.onload = function(){ 
     var username = document.getElementById(‘username‘);
     var err= document.getElementById(‘err‘);
     var data;
     username.onblur = function(){
         //获取ajax
         var req = xmlHttpRequest();
         //在地址栏输入网址
         req.open(‘get/post‘,‘访问地址？username=‘+username.value);
         //发送请求，把username传给后台
         req.send(null);//这是get提交，如果是post提交将要传的值写到括号中
         //后台处理，判断后返回字符串，数据库中有则返回no，没有则返回yes
         //接收str
         req.onreadystatechange = function(){
             if(req.status==200 && req.reqdyState==4){
                 data = req.responseText;//将后台传来的值封装到responseText中
                 //成功的状态
                 if(data==no){
                      console.log("用户名重复");
                      err.innerHTML = "用户名重复";
                 }else{
                      console.log("用户名可以注册");
                      err.innerHTML = "用户名可以注册";
                 }
             }else{
                 console.log("err="+data);//失败的状态
             }
         }
     }
 }

5.状态码

5.1.status：HTTP的状态码

状态码	说 明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

5.2.ajax状态码
onreadystatechange-指定回调函数
readyState:XMLHttpRequest的状态信息

就绪状态码	说 明
0	XMLHttpRequest对象没有完成初始化，即：刚刚创建
1	XMLHttpRequest对象开始发送请求，调用了open方法但还没调用send方法，请求还没有发出
2	XMLHttpRequest对象请求发送完成，send方法以调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束，收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束，一切都收到了

6.省市联动

创建List集合	List list = Arrays.asList(" "," "," "," ");
a.substring(start,stop).split(" ");	substring方法用于提取中介于两个指定下标之间的字符,spilt按照括号内内容切割
模板字符串	·· 数字1旁边的点
下拉框改变事件	onchange

window.onload = function(){
    var cap = document.getElementById("cap");
    var city= document.getElementById("city");
    cap.onchange = function(){
        //发送ajax
        var req = xmlHttpRequest();
        //在地址栏输入网址
        req.open("get","地址?cap="+cap.value);
        //发送请求，把username传给后台
        req.send(null);
        //后台处理，判断后返回字符串
        //接收str
        req.onreadystatechange = function(){
            if(req.status==200 && req.readyState==4){
                var data = req.responseText;
                console.log(data);
                var arr = data.substring(1,data.length-1).split(", ");
                console.log(arr);
                for(var i=0;i<arr.length;i++){
                    city.innerHTML+="<option value=‘"+i+"‘>"+arr[i]+"</option>"
                }
            }
        }
    }
}

select

public class Aj extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");	//解决post乱码问题，将请求的编码转化为utf-8
		response.setContentType("text/html;charset=utf-8");	//解决post乱码问题，将响应的编码转化为utf-8
		PrintWriter out = response.getWriter();
		String cap = request.getParameter("cap");
		System.out.println("cap="+cap);
		if("0".equals(cap)){
			List<String> heilist = Arrays.asList("哈尔滨","齐齐哈尔","牡丹江","佳木斯");
			out.print(heilist);
			System.out.println("heilist="+heilist);
		}else{
			List<String> liaoList = Arrays.asList("沈阳","大连","葫芦岛");
			out.print(liaoList);
			System.out.println("liaoList="+liaoList);
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}