• ajax 学习总结


    	ajax
    	
    
    ajax  : (asynchrous javascript and xml) 异步的
    	是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个特殊对象(XMLHttpRequest)也叫
    	ajax对象,向服务器发送异步请求,服务器返回部分数据,浏览器对这些数据 进行页面部分修改,
    	整个过程,页面无刷新,不打断用户操作
    
    获得ajax对象: 区分浏览器
    	兼容性:ie5.5  ActiveObject 
    	其他:  XMLHttpRequest	
    
    ajax重要属性:
    	onreadystatechange :用来绑定事件处理函数,处理readystatechange事件
    	readyState   :值(0,1,2,3,4)表示ajax对象和服务器通信的状态 4表示获得所有数据
    	responseText  :获得服务器返回的文本数据
    	responseXML  : 获得服务器返回的xml数据
    	status  :  获得状态码, 404,500,200,
    
    编程步骤:
    	1. 获得ajax对象
    	2.发送请求
    		get:(1)xhr.open('get','check_uname.do?uname=tom&age',true), true表示异步
    		     (2)xhr.onreadystatechange=f1;
    		     (3)xhr.send(null);
    		post:(1)xhr.open('post','check.do',true);
    		      (2)xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    			注:按照http协议规范,如发送post请求,在请求数据包里应该带content-type
    			    消息头,默认不带,用xhr.setRequestHander()设置
    		      (3)xhr.onreadystatechange=f1;
    		      (4)xhr.send('name=tom');
    	3.编写服务端的程序 (返回部分数据(文本))
    			//获得请求资源路径:端口号之后都是
    			String uri=request.getRequestURI();
    			System.out.println(uri);
    			//截取部分路径
    			String action =uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
    			System.out.println(action);
    			//得到输出对象
    			response.setContentType("text/html;charset=utf-8");
    			PrintWriter out =response.getWriter();
    			out.print("ok!");
    	4.编写事件处理函数
    		function f1(){
    			if(xhr.readyState==4 && xhr.status==200){
    				var txt=xhr.responseText;
    			}
    		}
    
    编码问题:
    	1.发送get请求:id 使用gbk编码,其他使用utf-8编码,服务器使用ios-8859-1编码
    	解决方法:1》服务端通一使用utf-8 URIEncoding=utf-8
    		  2》浏览器使用encodeURI函数来编码,
    			encodeURI是javascript内置函数
    	2.发送post请求:浏览器都使用utf-8编码,服务器端使用ISO-8859-1来编码
    	解决方法:request.setCharacterEncoding("utf-8");
    
    JSON(javascript object notation) 是一种轻量级的数据交换格式。
    	将数据先转换成一种与平台无关的数据格式然后交给对方来处理。
    	轻量级:相对于xml,json文档更小,解析速度更快 。官网www.json.org
    	
    	语法 {属性名:值,属性名:值....},可以保存对象数组、对象。
    	
    	取值范围:number、String、boolean、null、object
    
    	使用json:1.导包:json-lib.jar
    		  2.java对象转换字符串:
    			JSONObject jsonobj =JSONObject.fromObject(s);
    			String jsonStr=jsonobj.toString();
    		  3.多个对象组成的数组或集合转换json字符串
    			JSONArray jsonArr=JSONArray.fromObject(array);
    			String jsonStr=jsonArr.toString();
    		  4.json字符串转换javascript对象:JSON.parse(json字符串);
    		
    		
    jquery对ajax的支持 :
    	1. $.ajax({})方法 。 {}是一个用来描述请求选项参数的对象
    		参数:url: 请求地址
    		      data:请求参数-->(1)请求字符串 "admin=saiiy"
    					(2)对象{“admin”:“sally”}
    		      type:请求类型(get/post)
    		      dataType:服务器返回的数据类型 text、json、html、xml、javascript
    		      success:事件处理函数(处理服务器正常的数据)
    		      error:事件处理函数(处理服务器异常的数据)
    	2.load()
    		作用:向服务器发送异步请求,然后将返回的数据直接添加到符合要求的节点上
    		用法:$obj.load(url,[data]);
    	
    jquery的async:false,这个属性 
    默认是true:异步,false:同步。
    		
    	//异步请求数据
    	$.ajax({
            type: "get",//数据发送的方式(post 或者 get)
            url: "qxAutoStation2",//要发送的后台地址
            data: {timeStart:"12",timeStop:"14"},//要发送的数据(参数)格式为{'val1':"1","val2":"2"}
            dataType: "String",//后台处理后返回的数据格式
            success: function (data) {//ajax请求成功后触发的方法
           		    alert('请求成功');
          		  },
            error: function (msg) {//ajax请求失败后触发的方法
                alert(msg);//弹出错误信息
            }
     	   });
    
    
    ajax跨域请求
    	jsonp
    
    缓存问题:
    	当使用 ie 浏览器发送get请求,浏览器会查看请求地址是否访问过,如果有则不再发送请求
    	它会缓存第一次的请求结果
    	解决方法:在请求地址后面添加一个随机数
    

      

  • 相关阅读:
    python RabbitMQ gRPC 实践经验
    python 数据库实践经验
    python GUI相关
    angularjs中的$watch、$digest、$apply
    css选择器优先级
    angularjs基本理解
    如何编写符合web标准的XHTML文档
    跨域问题
    如何养成良好的书写代码习惯
    ie常见兼容问题
  • 原文地址:https://www.cnblogs.com/liujunzhe/p/8445108.html
Copyright © 2020-2023  润新知