HTTP协议
超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
注意:
所有的WWW文件都必须遵守这个标准
一次HTTP操作称为一个事务,其工作过程可分为四步
![](https://i-blog.csdnimg.cn/blog_migrate/4fac36138e8c2fbd58557ce22b63ee41.png)
HTTP协议-请求方法
![](https://i-blog.csdnimg.cn/blog_migrate/aa35a880345b518c44e3632d718cd38f.png)
最常见的增删改查所需要的请求方法有:
查询使用GET请求;
删除使用DELETE请求;
修改使用PUT请求;
增加使用POST请求;
注意:使用什么请求,取决于后端.
回顾原生创建Ajax的方法,思考如何使用jQuery处理Ajax?
使用jQuery处理Ajax,有三种方法:
1.$.ajax() 方法
2.$.get() 方法
3.$.post() 方法
$.ajax() 方法
通过 HTTP 请求加载远程数据
jQuery.ajax([settings])
Settings:可选。用于配置 Ajax 请求的键值对集合
示例:
$("#btn").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt"});
$("#myDiv").html(htmlobj.responseText);
});
$.ajax() 方法-参数
![](https://i-blog.csdnimg.cn/blog_migrate/4d7760d6aab247079df1222369289c1a.png)
success()参数的调用函数,配合json使用
<script>
$.ajax({
// $.ajax方法是默认是get请求
// 可以通过method修改请求方式
// method: "post",
// async默认是true为异步(有等待时间,可以先做其他事件),false表示同步(先执行在等待过程)
// async: true,
// cache表示是否换成页面的数据,默认为true,改为false表示不缓存此页面,datatype为script或isonp,是默认false的
// cache: true,
// data表示发送服务端的数据
// data: {
// username: "zhangsan",
// password: "123456"
// },
// 预期服务器返回的数据类型,例如:script,jsonp,json
// 如果服务器返回的数据类型是字符串类型,使用dataType:"json"可以自动帮你转成json类型
dataType: "json",
// ulr是接口
ulr: "./1.json",
// 请求成功后,可以通过形参获取后台传输的数据
success: function (s) {
console.log(json.parse(s));
},
// 请求失败时,调用次函数
error: function (err) {
// 形式参数err会返回请求失败的信息对象
console.log("数据请求失败", err);
},
// 在jsonp请求中重写回调函数的名字
jsonp: "fn",
// 给jsonp请求指定一个回调函数名
jsonCallback: "Callbackfn"
})
</script>
练习题1:做出如图表格效果,使用ajax引用json文件内容
![](https://i-blog.csdnimg.cn/blog_migrate/52c782f95c614c447ebc7da453c1a494.png)
第二种方法:
<script>
$.ajax({
url: "./1.txt",
dataType: "json",
success: function (res) {
console.log(res);
for (var i = 0; i < res.length; i++) {
$("#stulist").append(
"<tr id='apptr" + i + "'><tr>"
);
console.log(i);
var lists = res[i]
console.log(lists);
var str = JSON.stringify(lists)
console.log(str);
$.each(JSON.parse(str), function (index, domele) {
console.log(index);
$("#apptr" + i).append(
"<td>" + domele + "</td>"
);
});
}
}
})
$.get() 方法
通过 HTTP GET 请求从服务器上请求数据
$.get(URL,callback);
URL:必需参数,路径
Callback:可选参数,请求成功后所执行的函数名
![](https://i-blog.csdnimg.cn/blog_migrate/4c18fed2c399d1a3eaf91a92ec025478.png)
$.post() 方法
通过 HTTP POST 请求从服务器上请求数据
$.post(URL,data,callback);
URL:必需参数,路径
Data:可选参数,连同请求发送的数据
Callback:可选参数,请求成功后所执行的函数名
![](https://i-blog.csdnimg.cn/blog_migrate/3885686afbccf1322aa5198e43b8d89d.png)
什么是跨域
跨域,指的是浏览器不能执行其他网站的脚本
例子:比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口
产生跨域的原因
由浏览器的同源策略造成的
同源策略:同域名,同端口,同协议
同域名,同端口,同协议
![](https://i-blog.csdnimg.cn/blog_migrate/d33f0e3f8c8bb610d8de83aa29856464.png)
浏览器的控制台出现了这个错误就是产生了跨域问题,如下图的错误
<script>
$.ajax({
url:"http://192.168.10.58:3000",
success:function(res){
console.log(res);
}
})
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/c32753c96a1df2b062c9ab4d8c78732e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/44ca1c6682fb15369bc33cbebb802cb5.png)
跨域解决方案1
CORS跨域资源共享
服务端:header("Access-Control-Allow-Origin:*");
“*”表示所有的域都可以接受
缺点
ie10以下不支持
$("#btn").click(function(){
$.ajax({
url:"
http://localhost:3000",
type:"get",
success:function(info){
console.log(info);
},
error:function(err){
console.log(err);
}
});
})
服务端:
let http = require('http')
http.createServer((req,res)=>{
res.setHeader('Access-Control-Allow-Origin','*')
res.end('success')
}).listen(3000,function(){
console.log('serve start...')
})
跨域解决方案2
jsonp
动态创建script标签,使用jQuery的jsonp请求
优点
兼容性强&不受同源策略的限制
缺点
只能用get方法,不能使用post方法
$("#btn").click(function(){
$.ajax({
// localhost要换成ip
url:"
http://localhost/test.php",
type:"get",
//定义发送jsonp请求
dataType:'jsonp',
//更改定义的参数名
jsonp:'kyFn',//修改callback名称,但是php中也要修改成相对应的函数名
//指定jsonp发送的回调函数名(可以任意起名字,无需对应)
jsonpCallback:'hyly',
success:function(info){
console.log(info);
}
});
})
function hyly(res){console.log(res) }
服务端:
<?php
header("Content-type: text/html;charset=utf-8");
$callback=$_GET['kyFn'];
echo $callback.'("哈哈哈")';
?>