ajax教程

Ajax

JSON的优势:

轻量级，体积小，节省流量，提高加载速度
解析成原生JS对象，解析比XML更快
查找数据无需查找标签，更快

将JOSN字符串转换为JOSN对象

方法一. var obj = eval('(' + str1 + ')');
方法二. var obj = JSON.parse(str1);
将JSON对象转化为JSON字符串
var obj2=JSON.stringify(str2);

1. 简介：
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术,与服务器交换数据的技术
2. 定义

1. AJAX = 异步 JavaScript 和 XML。 2) AJAX 是一种用于创建快速动态网页的技术。 3)
   通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2. 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

ajax特点

异步加载数据，无需切换页面 更佳的用户体验：局部刷新、及时验证等 节省流量 JS控制数据的加载，更加灵活多用

封装一个ajax

function aa (){
	var ajax = ''
	try{
		ajax = new XMLHttpRequest();
	}cath(e){
		ajax = new ActiveXObject(Microsoft.XMLHTTP)
	}
ajax.open('post','1.txt',true);//  参1 post或get传参 ，参2 URL路径，参3 true异步，false同步
ajax.setRequestHeader('Content-type','application/x-www-from-urle ncoded');//请求头
ajax.send('name="张三" ')；用post传参要用send传递参数
ajax.onreadystatechange = ()=>{
	if(ajax.readystate == 4){
		if(ajax.status == 200){
			console.log(ajax.response)
			//ajax.responseText
			//ajax.responseXML
		 }
	  }
	}
}

1.XMLHttpRequest 对象

XMLHttpRequest 用于在后台与服务器交换数据.
所有现代浏览器均支持 XMLHttpRequest 对象
（IE5 和 IE6 使用 ActiveXObject）。
创建XMLHttpRequest对象
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};

2. open(method, url, asyn）打开和服务器的连接

参数：
method：String，请求的类型 get 或 post
url：String，文件在服务器上的位置（该文件可以是任何类型的文件，比 如 .txt ，.json 和 .xml，或者服务器脚本文件，比如  .php ）
asyn：Boolean，true（异步）或 false（同步）
同步需要等待返回结果才能继续，异步不必等待
var xhr=new XMLHttpRequest();
xhr.open('get', '123.txt', true); // 常用异步
不推荐使用false(同步)，仅用于一些小型的请求
async：true（异步）或 false（同步）
同步需要等待返回结果才能继续，异步不必等待
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能 干任何事
异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）-> 处理完毕

3 send( string） 发送给服务器

xhr.send();  将请求发送到服务器(get请求)
xhr.send(string)：仅用于 post 请求
与 post 相比，get 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 post 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（post 没有数据量限制）
发送包含未知字符的用户输入时，post 比 get 更稳定也更可靠
post请求需在send之前加： xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4 XMLHttpRequest 对象的重要属性：

onreadystatechange 事件 ( 响应就绪状态 )
readyState 和 status 属性存有XMLHttpRequest 的状态
readyState 改变时就会触发 onreadystatechange 事件
readyState 从 0 到 4 发生变化：
0: 请求未初始化   未调用open()方法
1：（启动）服务器连接已建立。已经调用open()方法，未调用send()方法
2: （发送）请求已接收 。 已经调用send()方法，未接收到响应
3: （接收）请求处理中。  已经接收到部分数据
4: 请求已完成，且响应已就绪 。 已经接收到全部数据，可以在客户端使用
status  等于200："OK"    等于404：未找到页面304（未修改） 自从上次请 求后，请求的网页未修改 过。 服务器 返回此响应时，不会返回网页内容。
当readyState为 4 且 status为 200 时，表示响应已就绪
 
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText  获得字符串形式的响应数据
responseXML  获得 XML 形式的响应数据
如来自服务器的响应并非 XML，用 responseText 属性
responseText返回字符串形式的响应，可以这样使用：
Div.innerHTML=xhr.responseText;

GET与POST区别

GET：
更常用，更方便
性能好
明文发送数据，没有POST安全
传输数据大小有限制：数据通过URL传递，但是URL有一定长度限制。

POST：
使用相对较少
性能只有GET的1/3左右
比GET稍微安全一点
没有传输数据大小限制