今天学到了什么
1.Ajax（Asynchronous JavaScript and XML）
Ajax不是某种编程语言
是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
可以实现异步操作：异步:客户端发起请求,在服务器端响应的过程中,可以进行其他的操作
1.1Ajax的使用
一个完整的ajax的步骤
A.创建ajax核心对象
B.与服务器建立连接
C.发送请求
D.响应
1.2.创建ajax核心对象
var xhr = new XMLHttpRequest();
1.3.http请求
定义:http计算机通过网络进行通信的规则
一个完整的HTTP请求过程，通常有下面7个步骤:
1.建立TCP连接
2.Web浏览器向Web服务器发送请求命令
3.Web浏览器发送请求头信息
4.Web服务器应答
5.Web服务器发送应答头信息
6.Web服务器向浏览器发送数据
7.Web服务器关闭TCP连接
一个HTTP请求一般有四个部分组成：
1.HTTP请求的方法或动作，比如是GET还是POST请求
2.正在请求的URL，总得知道请求的地址是什么吧
3.请求头，包含一些客户端环境信息，身份验证信息等
4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等
GET：一般用于信息获取
使用URL传递参数
POST：一般用于修改服务器上的资源
对所发送信息的数量无限制
1.4.请求响应
- open(method,url,asyn)
asyn值默认为true- send()
- onreadystatechange
一个HTTP响应一般由三部分组成：
1.一个数字和文字组成的状态码，用来显示请求是成功还是失败
2.响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
3.响应体，也就是响应正文
HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型
1XX:信息类，表示收到Web浏览器请求，正在进一步的处理中
2XX：成功，表示拥护请求被正确接受，理解和处理例如：200
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
4XX：客户端错误，表示客户端提交的请求由错误，例如：404 NOT Found，意味着请求中所引用的文档不存在。
5XX：服务器错误，表示服务器不能完成对请求的处理：如500
1.5JSON对象
- JSON:javaScript对象表示法（javaScript Object Notation）
- JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机械解析和生成
- JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就行了
JSON语法规则
{
"staff":[
{"name":"洪七","age":70}
{"name":"郭靖","age":35}
{"name":"黄蓉","age":30}
]
}
- JSON.parse()方法将json对象解析为JavaScript对象。
- JSON.stringify()将javascript的值,转换为JSON字符串。
- responseText:获取字符串形式的响应数据
- status:以数字形式返回http的状态码
- readystate值代表服务器响应的变化
1.6XMLHttpRequest获得响应
readyState属性
0:q请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接受，也就是接受到头信息了
3：请求处理中，也就是接受到响应主体了
4：请求已完成，且响应已就绪，也就是响应完成了
1.7get和post 例子
post,get
1.视觉：get请求的字段是在url
2.安全性：post方式更安全
3.请求的数据量：post请求的数据量更大
4.速度：get更快
get
<div id="test">
</div>
<script>
var test=document.getElementById("test");
var xhr = new XMLHttpRequest();
var url="https://www.easy-mock.com/mock/5b3ae098d294426e05198b4e/getTest";
xhr.open("get",url,true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var txt=JSON.parse(xhr.responseText).data.content;
console.log(txt);
test.innerHTML=txt;
}
}
</script>
post
<div id="test">
</div>
<script>
//使用原生的post方式的时候要设置一个请求头 在open()方法和send()之间设置
var test = document.getElementById("test");
//1.创建ajax核心对象
var xhr = new XMLHttpRequest();
var url = "https://www.easy-mock.com/mock/5b3b16cdb35f9276a57e736a/11/post";
//2.与服务器建立连接
xhr.open("post", url);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//3.发送请求
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = JSON.parse(xhr.responseText).data.content;
console.log(txt);
test.innerHTML = txt;
} else {
document.body.innerHTML = xhr.status;
}
}
</script>
2.用jQuery实现Ajax
- jQuery.ajax([settings])
- type:类型，"POST"或"GET"，默认为"GET"
- url:发送请求的地址
- data：是一个对象，连同请求发送到服务器的数据
- dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以sehz设置"json"
- success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
- error：是一个方法，请求失败是调用此函数。传入XMLHttpRequest对象
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
$.ajax语法
<p id="p">hello world</p>
<script>
var p=document.getElementById("p");
$.ajax({
method:"get",
url: "https://www.easy-mock.com/mock/5b3ae098d294426e05198b4e/getTest",
dataType:"json",
success:function(res){
console.log(res.data.content);
p.innerHTML=res.data.content;
},
error:function(xhr){
document.body.innerHTML=xhr.status;
}
})
</script>
$.get()语法
<p id="p">hello world</p>
<script>
var url="https://www.easy-mock.com/mock/5b3ae098d294426e05198b4e/getTest";
$.get(url,function(data){
console.log(data);
}).fail(function(data){
document.body.innerHTML=data.status;
});
</script>
$.post()语法
<p id="p">hello world</p>
<script>
var url="https://www.easy-mock.com/mock/5b3b16cdb35f9276a57e736a/11/post";
$.post(url,function(data){
console.log(data.data.content);
}).fail(function(data){
document.body.innerHTML=data.status;
});
</script>
3.跨域
-
一个域名地址的组成：
域.png - 当协议，子域名，主域名，端口号，任意一个不同时,就算作不同的域。
- 不同域之间请求资源就算做跨域。
-
Javascript出于安全性的考虑,不允许跨域调用其他页面的对象。简单理解就是因为Javascript同源策略的限制,a.com域名下的js无法操作b.com域名下的对象。
跨域例子.png
3.1解决跨域问题 使用jsonp
<script>
$.ajax({
type:"get",
url: url,
dataType:"jsonp",
success:function(res){
console.log(res);
},
error:function(xhr){
document.body.innerHTML=xhr.status;
}
})
</script>
