JavaScript - Ajax

2021-03-17 06:24

阅读:533

标签:odi   throw   oid   tps   全局变量   def   ram   开始   out   

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[i]+""
                }
            }
        }
    }
}

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 heilist = Arrays.asList("哈尔滨","齐齐哈尔","牡丹江","佳木斯");
			out.print(heilist);
			System.out.println("heilist="+heilist);
		}else{
			List 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);
	}

}

JavaScript - Ajax

标签:odi   throw   oid   tps   全局变量   def   ram   开始   out   

原文地址:https://www.cnblogs.com/yc0014/p/13976795.html


评论


亲,登录后才可以留言!