jquery-ajax和原生ajax

一. jquery的ajax

1.jquery的ajax是对原生ajax的封装

$.ajsx()

jquery 调用 ajax 方法：
	格式：$.ajax({});
	参数：
		type：请求方式 GET/POST
		url：请求地址 url
		async：是否异步，默认是 true 表示异步
		data：发送到服务器的数据
		dataType：预期服务器返回的数据类型
		contentType：设置请求头
		success：请求成功时调用此函数
		error：请求失败时调用此函数
代码示例:
	$.ajax({
		type:"get | post",
		url:"../js/cuisine_area.json",
		async:true,
		success : function (msg) {
			var str = msg;
			console.log(str)
			$('div').append("<ul></ul>");
			for(var i=0; i<msg.prices.length;i++){
				$('ul').append("<li></li>")
					$('li').eq(i).text(msg.prices[i])
			}
		},
		error : function (errMsg) {
			console.log(errMsg);
			$('div').html(errMsg.responseText)
		}
	});

几种取代$.ajax 的用法

1. $.get()

   这是一个简单的get请求功能以取代复杂的$.ajax请求成功时可调用回调函数.如果需要在出错执行函数,请使用$.ajax();

    1.请求 json 文件，忽略返回值
    	$.get('../js/cuisine_area.json');
    2.请求 json 文件，传递参数，忽略返回值
    	$.get('../js/cuisine_area.json',{name:"tom",age:100});
    3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
    	$.get('../js/cuisine_area.json',function(data){
    		console.log(data)
    	});
    4.请求 json 文件,传递参数,拿到返回值
    $.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
    	console.log(data)
    });
   

2. $.post()

   这是一个简单的post请求功能已取代复杂的$ .ajax().
   请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

    1.请求 json 文件，忽略返回值
    	$.post('../js/cuisine_area.json');
    2.请求 json 文件，传递参数，忽略返回值
    	$.post('../js/cuisine_area.json',{name:"tom",age:100});
    3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
    	$.post('../js/cuisine_area.json',function(data){
    		console.log(data)
    	});
    4.请求 json 文件,传递参数,拿到返回值
    	$.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
    		console.log(data)
    	});
   

3. $.getJSON()
   表示请求返回的数据类型是 JSON 格式的 ajax 请求

4. jsonp
   远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
   普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
   添加属性：
   jsonp:’callback’
   dataType:’jsonp’

    $.ajax({
    	type:"post",
    	url:"http://iservice.itshsxt.com/restaurant/find",
    	dataType : 'jsonp',
    	jsonp:"callback",
    	success : function (msg,status) {
    		if(status == "success"){
    			var res = msg.result;
    			$('div').append("<ul></ul>");
    			for(var i=0; i<res.length;i++){
    				$('ul').append("<li></li>")
    				$('li').eq(i).text(res[i].name)
    			}
    		}else {
    			alert("请求失败,错误信息：" + msg);
    		}
    	},
    	error : function (errMsg,sta) {
    		console.log(errMsg.message)
    	}
    });
   

原生ajax
1.核心技术xmlHttpRequest()
提供了向服务器发送请求和解析服务器响应提供了流畅的接口

① var xhr = new xmlHttpRequest();

② xhr.open() -->三个参数:请求类型,url ,是否为异步
	open()方法并不会真正发送请求，而只是启动一个请求以备发送。

③ xhr.send(参数)-->发送请求
	通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。

④ var responseText = xhr.responseText();-->得到后台的响应
	
	收到响应后,响应数据自动填充到XHR对象的属性:一共有四个
	a. responseText: 作为响应主体被返回的文体
	b. responseXML: 如果响应主体的内容类型是"text/xml 或 application/xml" 则返回包含响应数据的xml dom文体
	c. status: 响应的HTTP状态
	d. statusText: HTTP状态说明

注: get请求,请求的参数位置在url的后面,即("?后面"),所以send()-->参数值为null;
	 post的请求 没有参数时设置null