本文详细介绍了HTTP协议的基本概念及其在网页中处理HTML内容的作用。重点讲解了HTTP请求的四个步骤和常见的请求方法：GET、DELETE、PUT、POST。接着，讨论了jQuery中处理AJAX的三种方式：$.ajax()、$.get()和$.post()，并展示了使用示例。此外，文章还探讨了跨域问题，解释了产生跨域的原因及同源策略，并提供了两种跨域解决方案：CORS和JSONP，包括各自的优缺点和实现方法。
HTTP协议
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
注意：
所有的WWW文件都必须遵守这个标准
一次HTTP操作称为一个事务，其工作过程可分为四步
HTTP协议-请求方法
最常见的增删改查所需要的请求方法有:
查询使用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() 方法-参数
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文件内容
第二种方法:
<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：可选参数，请求成功后所执行的函数名
$.post() 方法
通过 HTTP POST 请求从服务器上请求数据
$.post(URL,data,callback);
URL：必需参数，路径
Data：可选参数，连同请求发送的数据
Callback：可选参数，请求成功后所执行的函数名
什么是跨域
跨域，指的是浏览器不能执行其他网站的脚本
例子：比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口
产生跨域的原因
由浏览器的同源策略造成的
同源策略：同域名，同端口，同协议
同域名，同端口，同协议
浏览器的控制台出现了这个错误就是产生了跨域问题,如下图的错误
<script>
$.ajax({
url:"http://192.168.10.58:3000",
success:function(res){
console.log(res);
}
})
</script>
跨域解决方案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.'("哈哈哈")';
?>
扫一扫
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
