Ajax和jQuery重点总结

一、Ajax基本步骤

function doAjax(){
	//1.创建异步对象
	var xmlHttp = new XMLHttpRequest();

	//2.绑定事件
	xmlHttp.onreadystatechange = function() {
		//处理服务器端返回的数据，更新当前页面
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){			
			//获取服务器返回的数据
			var data = xmlHttp.responseText;
		}
	}
	//3. 初始化请求数据
	//true：异步处理请求。使用异步对象发起请求后 ，不用等待数据处理完毕，就可以执行其他的操作
	//false：同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。任意时刻只能执行一个异步请求
	xmlHttp.open("get","资源文件名?"+数据字符串,true);

	//4.发起请求
	xmlHttp.send();
}

二、json基础

1. java中json的工具库

   1. gson(google)
   2. fastjson:速度块，不是最符合json处理规范的
   3. jackson：性能好，规范好
   4. json-lib：性能差，依赖多

2. 基本用法

   //使用jackson把java对象转化为json格式的字符串
   ObjectMapper om = new ObjectMapper();
   
   //把参数的java对象转化为json格式的字符串
   String json = om.writeValueAsString(new Object());
   
   //把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
   response.setContentType("appliction/json;charset=utf-8");
   PrintWriter pw = response.getWriter();
   pw.Println(json);
   

   //eval是执行括号中的代码，把json字符串转换为json对象
   var data = xmlHttp.responseText;
   var jsonobj = eval("("+data+")");
   

三、jQuery

1. 对象分类

   /*
   	1. $(document),$是jQuery中的函数名称，document是函数的参数作用是document对象变成，jQuery函数库可以使用的对象
   	2. ready：是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后，会执行ready函数的内容，ready相当于js中的onLoad事件
   	3. function（）自定义的表示onLoad后要执行的功能
   */
   $(document).ready(function(){
   	alert("Hello jQuery")
   })
   //简写
   $(function(){
   	
   })
   
   //dom对象转化为jQuery对象
   var $jobj = $(dom对象)
   //jQuery对象转化为dom对象
   var obj = $("id值")[0];//jQuery对象是一个数组
   var obj = $("id值").get(0);
   
   

2. 基本选择器

   //id选择器
   $("#id")
   
   //class选择器，表示css中的样式
   $(".class名称")
   
   //标签选择器
   $("标签名")
   
   //所有选择器
   $("*")
   
   //组合选择器
   $("#id,.class,标签名")
   

3. 表单选择器

   //使用<input>标签的type属性值，定位dom对象的方式
   $(":type属性值")
   

4. 过滤器

   /*
   	<div>1</div>	dom1
   	<div>2</div>	dom2
   	<div>3</div>	dom3
   */
   //把选择到出的dom对象，在加某些条件过滤一遍
   $("div")==[dom1,dom2,dom3]
   
   //1. 选择第一个first，保留数组中第一个DOM对象
   $("选择器：first")
   
   //2. 选择最后一 个last，保留数组中最后的DOM对象
   $("选择器：last")
   
   //3. 选择数组中指定对象
   $("选择器：eq(数组索引)")
   
   //4. 选择数组中小于指定索引的所有DOM对象
   $("选择器：lt(数组索引)")
   
   //5. 选择数组中大于指定索引的所有DOM对象
   $("选择器：gt(数组索引)")
   

5. jQuery中给dom对象绑定事件

   //当页面dom对象加载后,给对象绑定事件，因为此时button对象已经在内存中创建好了，才能使用
   $(function(){
   	//可以在代码执行过程中动态绑定事件
   	//$(选择器).事件名称(事件的处理函数)
   	$("#btn").onclick(function(){
   		alert("btn按钮单击了")
   	})
   
   	//第二种方式
   	$(选择器).on(事件名称，事件的处理函数)
   })
   
   

6. 表单属性过滤器

   /*
   	根据表单中dom对象的状态情况，定位dom对象的
   	启用状态：enabled
   	不可用状态：disabled
   	选择状态：checked ，例如radio，checkbok
   */
   //选择可用的文本框
   $(":text:enabled")
   
   //选择不可用的文本框
   $(":text:disabled")
   
   //复选框中的元素
   $(":checkbox:checked")
   
   //选择指定下拉列表的被选中元素
   $("选择器>option:selected")
   

7. 常用函数

   //1.val
   $(选择器).val()//读取数组中第一个DOM对象的value属性值
   $(选择器).val(值)//给数组中所有DOM对象的value属性值进行统一赋值
   
   //2. text
   $(选择器).text()//无参数调用，读取数组中所有的DOM对象的文字显示内容，将得到内容拼接为一个字符串返回（innerText）忽略标签
   $(选择器).text(值)//有参数调用，对数组中所有的DOM对象的文字显示内容进行统一赋值
   
   //3.attr
   $(选择器).attr("属性名")//获取DOM数组第一个对象的属性值
   $(选择器).attr("属性名","值")//对数组中所有DOM对象的属性设为新值
   
   //4.remove
   $(选择器).remove()//将数组中所有的DOM对象及其子对象一并删除
   
   //5. empty
   $(选择器).empty()//将数组中所有的DOM对象的子对象删除
   
   //6.append
   $(选择器).append("<div>我动态添加的div</div>")
   
   //7. html
   $(选择器).html()//获取DOM数组第一个匹元素的内容（innerHTML）包含标签
   $(选择器).html(值)//用于设置DOM数组中所有元素的内容
   
   
   

8. each函数基本用法

   //.each
   //$.each(循环的内容，处理函数)
   var arr = [11,22,33]
   $.each(arr,function(index,element){
   	alert("循环变量："+index+"=====数组成员："+element);
   })
   
   //循环json
   var json ={"name":"张三","age":20}
   $.each(json,function(i,n){
   	alert("i是key"+i+",n是值="+n)
   })
   
   //还可以循环jQuery对象数组
   
   //第二种格式
   $(":text").each(function(i,n){
   	alert("i="+i+",n="+n.value)
   })
   

9. 使用jQuery函数来实现ajax请求的处理

   1. $.ajax()参数说明

      1. async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
         xmlHttp.open(get,url,true),第三个参数一样的意思。

      2. contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
         例如你想表示请求的参数是json格式的， 可以写application/json

      3. data: 可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据

      4. dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
         当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够
         读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
         返回你需要的数据格式。

      5. error: 一个function ，表示当请求发生错误时，执行的函数。
         error:function() { 发生错误时执行 }

      6. sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
         之前使用XMLHttpRequest对象， 当readyState4 && status200的时候。

      7. url:请求的地址

      8. type:请求方式，get或者post， 不用区分大小写。 默认是get方式。

      9. 主要使用的是 url , data ,dataType, success .

   2. 基本语法

      $.ajax({  
      	async:true, 
       	contentType:"application/json", 
      	data: {name:"lisi",age:20 },
      	dataType:"json",
       	error:function(){ 请求出现错误时，执行的函数 },
       	// data 就是responseText, 是jquery处理后的数据。
      	success:function(data) {处理数据},
       	url:"bmiAjax",
      	type:"get"
       })
      

10. $.get()

    $.get(url,data,function(resp),dataType)
    

11. $.post()

    $.post(url,data,function(resp),dataType)