ajaj简介

1. 什么是ajax？

　　ajax的全称 Asynchronous（异步） JavaScript and XML。

　　ajax是一种用于创建快速动态网页的技术。

　　主要用于前后台的交互，在前后台的交互中还有一种表单提交，不过现在表单已经被废弃了。

　　ajax并不是一种全新的语言，而是一种使用现有标准的一种方法。

　　ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

2. ajax的提交方式

　　提交方式有8中，其中最常用的只有2种，分别是GET和POST，两者最大的区别是，get提交的参数在地址栏中，post提交的参数在请求体中，两者相比，post的安全性高于get。

　　get的参数有限制，大约是2000个字符左右，而post的参数在网速良好的情况下，可以达到无限。

3. 原生ajax

　　XMLHttpRequest 是 AJAX 的基础，

　　所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

　　XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　因此，在创建ajax对象-xmlhttprequest对象的时候，我们的考虑兼容性的问题

　　ajaxget提交：

<script>
		// 一般情况下只能在有服务的环境下发送请求

		// ajax是局部刷新


		// 1.创建ajax对象-xmlhttprequest对象
		// XMLHttpRequest 对象

		// variable=new XMLHttpRequest();    新版本的浏览器
		// variable=new ActiveXObject("Microsoft.XMLHTTP");    //老版本的IE  ，IE5，IE6
		var xhr;
		if(window.XMLHttpRequest){    //常规，如果有，直接使用
			xhr = new XMLHttpRequest();
		}else{   //如果没有，老版本IE
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		console.log(xhr)
		console.log("状态码:" + xhr.readyState);
		console.log('响应码：' + xhr.status);
		console.log('响应文本:' + xhr.responseText);
		console.log('步骤一完成')


		// 2.通过监听ajax的状态的改变来监听
		xhr.onreadystatechange = function(){
			console.log('xhr的状态码发生了改变');
			console.log("状态码:" + xhr.readyState);
			console.log('响应码：' + xhr.status);
			console.log('响应文本:' + xhr.responseText);
			console.log('
');
		}
		console.log('步骤二完成')

		// 3.创建请求的消息，连接服务器      状态码0=>1
		xhr.open('GET','07.php',true);    //最后一个参数是bool，表示同步||异步，true异步
		console.log('步骤三完成')

		// 4.发送
		xhr.send(null);   //如果是post请求，就放post参数，如果是get请求，发送null就行了 
</script>

　　ajaxpost提交：

<script>
	// 1.
	var xhr;
		if(window.XMLHttpRequest){    //常规，如果有，直接使用
			xhr = new XMLHttpRequest();
		}else{   //如果没有，老版本IE
		　　　　　xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2.
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if (xhr.status == 200) {
				console.log(xhr.responseText);
				p01.innerHTML = xhr.responseText;
			}
		}
	}
	// 3.
	xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);
	// 3.5  在发送post请求的时候，你得告诉服务器你发送的是一个什么
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	// 4.发送
	xhr.send('strName=' + uname.value + '&strScore=' + score.value);
</script>

　　get和post提交的区别就在于提交时参数的位置，

　　get是在第三步的时候

  xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);        在09.php后面添加参数。

　而post是在最后一步的时候，将参数拼接上去。

　xhr.send('strName=' + uname.value + '&strScore=' + score.value);

4. jQuery的ajax
　　

$("#btn").click(function(){
	$.ajax({
		type : "POST",       //提交的类型
		url : "http://192.168.9.154:8888/0221ajax/01.php",			//地址
		data : {									参数
			uname : $("#username").val()
		},
		success : function(data){   //data就是原生的xhr.responseText
			console.log(data);
		},
		error : function(err){    //错误的
			console.log(err)
		}
	})
})

5. 跨域问题

　　在ajax的提交中出现跨域时，如何解决？

　　跨域，首先要明白浏览器同源策略机制，那什么是同源策略机制？

　　同源策略阻止从一个源加载的文档或脚本中获取或设置另一个源加载的文档的属性。

　　在控制台出现类似的错误 ：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

　　基本上都是跨域问题。

　　有时端口号没有写的都是80端口，也就是用的最多的端口。

 http://       www.bailiban.com :       8888       /img/01.jpg?name=jack
 https:
 协议                域名               端口号            请求的资源路径

协议，子域名，主域名，端口号，只要有一个不同就是跨域，资源就不能通过ajax进行访问

　　解决方法：

　　1.代理服务器

　　2.设置请求头 在服务端语言增加两行代码

　　　　 res.setHeader("Access-Control-Allow-Origin","*");

　　　　res.setHeader("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");

　　3.JSONP

　　　　JSONP原理上是利用 script 标签的 src 属性，因为同源策略对 scropt 的 src 属性不起作用。