ajax基础（初识）

ajax基础（初识）

概念：async javascript and xml === 异步js和xml

​ ajax 是不刷新页面的情况下发送http请求的

​ 发送数据的格式：xml (已不多用) , json

一、ajax的get请求：

1. 创建对象 - var xhr = new XMLHttpRequest()

2. 建立连接 - ajax对象.open(请求方式，请求的url，true(false)//既是否异步) //第三个参数可省略，默认为true 异步

3. 监听状态 -

   xhr.onreadystatechange = function(obj){
   	if(xhr.redyState == 4){
   		var res = xhr.responseText;
   		if(obj.dataType == "json"){
   			res = JSON.parse(res);
   		}
   		obi.success(res);
   	}else{
   		obj.error();
   	}
   }
   

4. 发送请求 - xhr.send()

#建议使用异步操作，同步操作会有警告

二、ajax的post请求：

​ 只多了个设置请求头 - 需设置 - 模拟表单提交

1. 创建对象 - var xhr = new XMLHttpRequest()

2. 建立连接 - ajax对象.open(请求方式，请求的url，true(false)//既是否异步) //第三个参数可省略，默认为true 异步

3. 监听状态 -

   xhr.onreadystatechange = function(obj){
   	if(xhr.redyState == 4){
   		var res = xhr.responseText;
   		if(obj.dataType == "json"){
   			res = JSON.parse(res);
   		}
   		obi.success(res);
   	}else{
   		obj.error();
   	}
   }
   

4. 设置数据格式 -

    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
   

5. 发送请求 - xhr.send()

ajax的优点与缺点

优点：

1. ajax不需要插件 - 支持jse
2. 不用刷新页面，用户体感比较好
3. 发送http请求 - 发送部分数据 - 减轻了服务器的负担

缺点：

​ 不能后退的，对于搜索引擎的支持不太友好，爬虫爬不到

xhr.redyState有5个状态：0 1 2 3 4

0：请求未初始化；还没有调用 open()。

1：请求已经建立；但是还没发送，没有调用 send()。

2：请求已发送；正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了(请求成功/请求失败)。

---

对于前端我我才相当于一只脚在里面一只脚在外面的情况，依旧还是在学习的状态，路漫漫其修远兮，吾将上下而求索。因为学习的时间并不是很长，所以文章的很多内容是一种总结。我现在还没有办法，或者说还没有能力去写出我自己的东西。就像我发的小故事一样，虽然能总结出里面的道理，却没办法写出自己的故事。（悄悄地说：“读书人能叫偷么？开源的东西能算偷么？叫借鉴。 /骄傲脸”）,开个玩笑，当然如果我的文章真的侵权的话，可以联系我，我会加上来源，或者删除。毕竟很多知识都是网上看来的，谁也没办法说出谁才是真正的原创。