ajax基础笔记

ajax

1.研究什么是ajax

Asynchronous JavaScript And XML
异步 javaScript 和 xml (Extensiable Markup Languge)

2.ajax的特点

**特点** 
	异步请求 局部刷新 
	
	 AJAX 是一种与服务器交换数据时，在不重新加载整个页面的情况下实现网页的部分更新的技术
	 
**优点**
（1）最大的优点就是页面无刷新，用户的体验非常好；
（2） 使用异步方式与服务器通信，具有更加迅速的相应能力；
（3）可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端限制的能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本，并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求和相应对服务器造成的负担；
（4）基于标准化的并被广泛支持的技术，不需要下载插件和小程序；
	 
	 
**缺点**
1.Ajax干掉了Back与History功能，即对浏览器机制的破坏在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面
2.安全问题 AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
3.对搜索引擎支持较弱
4.破坏程序的异常处理机制
5.违背URL与资源定位的初衷
6.不能很好地支持移动设备
7.客户端肥大，太多客户段代码造成开发上的成本

3.技术构成

ajax 的技术构成
 以JS 为基础编程语言
 以XML和JSON 作为数据传输格式
 以HTML 为显示骨架
 以CSS 为渲染手段
 以 XMLHttpRequest 对象作为 请求的发送 数据的响应接收的对象

3.1.XMLHttpRequest

XMLHttpRequest对象一共有三个属性：onreadystatechange(全小写)、readyState、status
　　1.onreadystatechange 
　　xmlhttp.onreadystatechange = function(){
　　}；
　　每次readyState对象的改变都会触发一次onreadystatechange属性储存的函数，一次有效的Ajax请求一共会触发5次该事件

　　2.readyState
　　　　一共有5个值，0~4分别代表不同的状态。
　　　　0  ——    请求未初始化
　　　　1  ——    服务器已建立了链接
　　　　2  ——    请求已被服务器接收
　　　　3  ——    请求正在被处理
　　　　4  ——    请求完成处理，响应就绪
　　　　if(xmlhttp.readyState==4…):用以判断当前服务器是否已准备好响应

　　3.Status
　　代表着Http状态码 200：OK
　　if(xmlhttp.readyState==4&& xmlhttp.status==200)

3.2. XMLHttpRequest的api

 XMLHttpRequest的api
  open(method,url,async)   请求准备函数 
     method 就是请求方式   string 类型  取值有  get  post  put delete
     url  请求的路径  string   
     async  是否异步  布尔类型   true 代表异步  false 代表同步 
     
   onreadystatechange    指定数据处理函数  (回调函数)
      function ( ){
          // 获取服务端返回的数据  readyState 交互的状态码   status http 响应状态码
          if(xhr.readyState==4 && xhr.status == 200){
              var  text = xhr.responseText;
          }
      }
       
  send()   发送请求 

3.3. 获取请求对象

获取异步请求对象 （判断浏览器类型）
<script type="text/javascript">
function   getXHR(){
	var xmlhttp;
	if (window.XMLHttpRequest){
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	    xmlhttp=new XMLHttpRequest();
	}else{// code for IE6, IE5
	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//alert(xmlhttp);
	return  xmlhttp;
}
</script>

1.缓存问题 
  浏览器对同一个get 请求 处理方式 会根据浏览器的类型和版本 表现出不同的处理
 一般 火狐和谷歌 浏览器会重新发送这个get 请求。 而IE 浏览器会直接使用上一次
 get 请求的结果。 但有时需要对同一个get 请求做出不同的响应 哪这样使用上一次
 结果的情况就会出现问题。
 
2.如何解决
 把get 换成 post
 在url 后面 拼接  动态参数 
 
3.乱码问题 
  tomcat8 下 get 请求没有乱码  但是IE浏览器不支持url后面传输中文
           可以使用encodeURI(url)  进行转码
  post 请求 需要使用 request.setCharacterEncoding("utf-8") 

4.研究如何使用jquery 来完成ajax请求的发送

异步请求对象的创建   请求的发送  响应数据的接收 做了封装 
   同时也考虑了 浏览器的兼容问题(缓存  乱码)
   
 $.ajax({
 	url:请求的路径 ，
 	type:请求的方式，
 	success: 相当于 注册处理函数 并且 readySate 是4  http 状态是200
              在注册函数中 直接使用参数 就可以获取到服务端返回的值 ,
 	async:是否同步请求还是异步请求 默认是true 代表异步,
 	data:{类json的传递格式}，
 	cache:布尔类型 是否缓存 默认true  改成false 就不缓存,
 	error:匿名函数 程序出错走方法
 });

$.get(url，data，function，datatype)
	url：请求地址
	data：请求参数
	dataType：服务器返回的数据类型
	function：服务器正常处理时执行的回调函数


$.post(url，data，function，datatype)
	url：请求地址
	data：请求参数
	dataType：服务器返回的数据类型
	function：服务器正常处理时执行的回调函数

$.getJSON(url,data,function)
$obj.load(url,data,function)

Jquery对象的获取方法:
- 可以通过以往的方法来获取,即class(.),id(#)等等
- 可以再对应的事件中传入参数this,并且在script中的方法参数起名(假如acc),之后则可在下方直接${acc},即通过传参的方式来获取对象