小白学习ajax


HTTP学习

1.概念
1.客户端与服务器超本文无状态传输协议
2.http默认端口80
3.https 默认端口 443

2.请求方法
1.options:测试有哪些方法可以用
2.get:获取服务信息
3.Post: 修改与更新,新增服务器信息
4.put:新增
5.delete:删除
6.head 只返回头信息
7.trace:回显头信息,用来测试
8.connect: 管道形式连接

3.请求过程
建立tcp连接 客户端发送请求头+请求体 服务器响应请求头+请求体 ,关闭tcp连接 客户端渲染内容
1.客户端发起 http请求 建立tcp连接
2. 客服端(浏览器)发送请求信息(状态行 请求头 空行 请求体)
3. 服务的响应请求信息(状态行 响应头 空行 响应体)
4. 客服关闭tcp网络连接
5. 客户端(浏览器)渲染内容

4常见的http响应码
1.
100:这个状态码是告诉客户端应该继续发送请求,这个临时响应是用来通知客户端的,部分的请求服务器已经接受,但是客户端应继续发送求请求的剩余部分,如果请求已经完成,就忽略这个响应,而且服务器会在请求完成后向客户发送一个最终的结果
2.
200:这个是最常见的http状态码,表示服务器已经成功接受请求,并将返回客户端所请求的最终结果

    202:表示服务器已经接受了请求,但是还没有处理,而且这个请求最终会不会处理还不确定

    204:服务器成功处理了请求,但没有返回任何实体内容 ,可能会返回新的头部元信息

    301:客户端请求的网页已经永久移动到新的位置,当链接发生变化时,返回301代码告诉客户端链接的变化,客户端保存新的链接,并向新的链接发出请求,已返回请求结果

    404:请求失败,客户端请求的资源没有找到或者是不存在

    500:服务器遇到未知的错误,导致无法完成客户端当前的请求。

    503:服务器由于临时的服务器过载或者是维护,无法解决当前的请求,以上http状态码是服务器经常返回的状态代码,用户只能通过浏览器的状态了解服务器是否正常运行,一般除了错误的状态码,都不会看到服务器的状态码的,新SEOer你们了解到了吗?内容编辑来自51特色购SEO优化人员,想了解更过状态码的知识可以加我好友,一起相互交流学习

5.同步异步
概念理解:
**“同步”**就好比:你去外地上学(人生地不熟),突然生活费不够了;此时你决定打电话回家,通知家里转生活费过来,可是当你拨出电话时,对方一直处于待接听状态(即:打不通,联系不上),为了拿到生活费,你就不停的oncall、等待,最终可能不能及时要到生活费,导致你今天要做的事都没有完成,而白白花掉了时间。打不通电话,阻塞了。

异步就是:在你打完电话发现没人接听时,猜想:对方可能在忙,暂时无法接听电话,所以你发了一条短信(或者语音留言,亦或是其他的方式)通知对方后便忙其他要紧的事了;这时你就不需要持续不断的拨打电话,还可以做其他事情;待一定时间后,对方看到你的留言便回复响应你,当然对方可能转钱也可能不转钱。但是整个一天下来,你还做了很多事情(非阻塞)。 或者说你找室友临时借了一笔钱,又开始happy的上学时光了。

阻塞和非阻塞强调的是程序在等待调用结果(消息,返回值)时的状态

同步和异步强调的是消息通信机制

6.原生get 原生post
 Get方式:

用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。

Post方式:

当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST方式传送数据量大,处理效率没有get方式高,数据不会被缓存,对于账号和密码等,比较安全。

7.地址url的组成
// 地址分享
// https://www.520mg.com/ajax/echo.php?name=mumu&age=18#top
// protocol: “http:” 协议
// host: “www.520mg.com” 域名
// pathname: “/ajax/echo.php” 地址
// port: 80 /443端口号
// search: “?name=mumu&age=18” 查询条件
// hash: “#top” 哈希值

8.浏览器的同源策略
// 当从本地网页 获取服务器资源(ajax) 要求被请求的地址 与当前地址要保持同源
// 协议一致 file http https
// 域名一致 520mg.com baidu.com
// 子域名一致 music.qq.com game.qq.com不同的子域名
// 端口号一致 127.0.0.1:8080 127.0.0.1:8888 不同端口号,

// http://127.0.0.1:8088/ajax/demo3-ajax-post.html
// “http://localhost/echo.php
域名不一致端口号不一致

9.理解跨域,跨域的方法
// 跨过浏览器的同源策略(跨域名)请求数据:在实际的工作的经常需要的功能
// 01 后端响应头cos跨域
Access-Control-Allow-Origin *
// php:header(“Access-Control-Allow-Origin: *”);
// 02 jsonp跨域
// 03 (开发阶段)代理跨域

ajax

1.名称:异步的javascript and xml

2.原理
1.通过 XMLHttpRequest 与服务器交换数据
2.服务数据通过json 或者 xml格式返回
3.浏览器端通过js+ccs渲染展示数据

3.Post
1.新建ajax对象
var xhr = new XMLHttpRequst()
2. 打开连接
xhr.open(“POST”,url,fasle)
3. 设置头信息(get省略)
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4. 监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState4&&xhr.status200){}
}

返回的数据 xhr.responseText

5.发送
xhr.send(“name=mumu&age=18”)

3.script 标签的src属性没有同源策略限制
// 浏览器的同源策略
// 当浏览器向服务器请求数据(ajax)需要被请求的地址与当前的网址同源
// 同源:协议一致http 子域名一致 pan.baidu new.baidu 域名一致 qq.com 端口号一致:8081
// https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=__jp1

// script 标签的src属性没有同源策略限制
// 已经后后端约定好 返回的数据格式是 方法名(数据) jp({data…}) 执行函数并传参

jquery中ajax

1.第一层 $.ajax()
2.第二层
$.get
1.回调函数
$.get(url,function(data,status,xhr){})
2. .done()
.fail()
.always()
3. .then()
.catch()

$.post(url,data,function(data,status,xhr))

3.第三层
$.getJSON()
$.getScript()
load()

url组成

1.https:www.520mg.com:443/ajax/echo.php?name=mumu&age=18#cate
2.https 协议
3.www子域名
4.520mg.com 域名
5.:443 端口号
6./ajax/echo.php 路径
7.?name=mumu&age=18 查询条件
8.#cate 哈希值

浏览器同源策略

1.当浏览器去访问服务器资源(ajax) 要求服务器的地址与浏览器同源
2.协议,域名,子域名,端口号要一致

跨域

1.绕过浏览器的同源策略,请求到数据

2.跨域方式
1. 服务器响应头信息跨域
Access-Control-Allow-Origin: *
2. jsonp跨域
3. 服务器代理(开发)

异步,同步

同步胡阻塞代码执行

http响应码

1xxx
开始

2xx
成功

3xx
重定向

4xxx
客户端请求地址错误

5xx
服务器错误

案例解析读背

案例一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同步</title>
</head>
<body>
<script>
// console.log(100);
// alert(200);
// console.log(300);
console.log(100);
setTimeout(()=>{
console.log(200);
},2000)
console.log(300);
</script>
</body>
</html>

案例二

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax get</title>
</head>
<body>
<button id="btn">发送</button>
<p id="content"></p>
<script>
btn.onclick = function(){ //按钮单击事件
// 01 创建xhr
var xhr = new XMLHttpRequest();
// 02 open打开连接
xhr.open("GET",'./be.txt',false);

// 03 监听readystate readyState 4准备状态完毕
// status 状态码200 响应成功
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
content.innerHTML= xhr.responseText;

// responseText 返回的文本
}
}
// 04 send 发送
xhr.send();
// 05 实现渲染

}
</script>
</body>
</html>

案例三

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax get</title>
</head>
<body>
<input type="text" id="name" placeholder="请输入用户名">
<input type="text" id="age" placeholder="请输入年龄">
<button id="btn">发送</button>
<p id="content"></p>
<script>
btn.onclick = function(){
// 01 创建xhr对象
var xhr = new XMLHttpRequest();
// 02 获取数据
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
// 03 建立连接
xhr.open("POST","http://localhost/echo.php",false);
// 04 监听
xhr.onreadystatechange = function(){
if(xhr.status==200&&xhr.readyState==4){
content.innerHTML = xhr.responseText;
}
}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//设置编码形式
xhr.send(`name=${name}&age=${age}`);

}
// 浏览器同源策略
// 当从本地网页 获取服务器资源(ajax) 要求被请求的地址 与当前地址要保持同源
// 协议一致 file http https
// 域名一致 520mg.com baidu.com
// 子域名一致 music.qq.com game.qq.com 不同的子域名
// 端口号一致 127.0.0.1:8080 127.0.0.1:8888 不同端口号,

// http://127.0.0.1:8088/ajax/demo3-ajax-post.html
// "http://localhost/echo.php 域名不一致端口号不一致

// 跨域:
// 跨过浏览器的同源策略(跨域名)请求数据:在实际的工作的经常需要的功能
// 01 后端响应头cos跨域 Access-Control-Allow-Origin *
// php:header("Access-Control-Allow-Origin: *");
// 02 jsonp跨域
// 03 (开发阶段)代理跨域

// 地址分享
// https://www.520mg.com/ajax/echo.php?name=mumu&age=18#top
// protocol: "http:" 协议
// host: "www.520mg.com" 域名
// pathname: "/ajax/echo.php" 地址
// port: 80 /443端口号
// search: "?name=mumu&age=18" 查询条件
// hash: "#top" 哈希值

// onclick 单击事件
// Http Http
// Request 请求
// Element 元素 by通过 id
// ready准备 state状态 change 更改
// status 状态码 readyState响应状态
// innerHTML 内部HTML
// response 响应 Text 文本
// set 设置 Request 请求 Header头
// content-type 内容类型 application程序 form表单 url统一资源地址 encoded 编码
// send 发送
</script>
</body>
</html>

案例四

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>加载</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 目标,单击加载 去下载be.html内容放入在con 里面
$(function(){
$("button").click(function(){
$(".con").load("./be.html .content");
})
})

// jquery中的ajax 有三层
// 底层 $.ajax()
// 中 $.get() $.post()
// 上 $.getJSON() $.getScript load()
</script>
</body>
</html>

案例五

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>getScript</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载js 执行js
$(function(){
$("button").click(function(){
$.getScript("./script.js");
})
})

</script>
</body>
</html>

案例六

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>getJSON</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载be.json 放入到con
$(function(){
$("button").click(function(){
$.getJSON("./be.json",function(data,status,xhr){
console.log(data,status,xhr);
// data be.json 里面的数据
// status 状态 success 成功
// xhr 封装好的jquery xhr对象
// JSON.stringif 把js对象转换字符串
$(".con").text(JSON.stringify(data));
})
})
})

</script>
</body>
</html>

案例七

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./be.txt")
.done(res=>{//成功
$(".con").text(res);
})
.fail(err=>{
console.log(err)
})
.always(xhr=>{
console.log("成功失败都执行",xhr);
})
})
})

// done 完成
// fail 失败
// always 总是

</script>
</body>
</html>

案例八

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./b.txt")
.then(res=>{
$(".con").text(res)
})
.catch(err=>{
console.log(err)
})
})
})
// 任意jq的ajax 都可以有这几种表现形式
// 1. 回调函形式 $.get(url,function(data,stata,xhr){})

// 2. promise .done() .fail() .always()

// 3. promise .then().catch()

// done 完成
// fail 失败
// always 总是

</script>
</body>
</html>

案例九

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./be.txt")

})
})

// done 完成
// fail 失败
// always 总是

</script>
</body>
</html>

案例十

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>get</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
// 单击按钮 加载文本 be.txt
$(function(){
$("button").click(function(){
$.get("./be.txt",function(data,status,xhr){
if(status=="success"){
$(".con").text(data);
}
})
})
})

</script>
</body>
</html>

案例十一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="name" placeholder="用户名"/>
<input type="text" id="age" placeholder="年纪"/>
<button>发送</button>

<div class="con"></div>
<script src="./jquery-3.3.1.js"></script>
<script>
//
$(function(){
$("button").click(function(){
// 目标:发送 age 和name到后端
var name = $("#name").val();
var age = $("#age").val();
// var data = {name,age};
$.post("https://www.520mg.com/ajax/echo.php",`name=${name}&age=${age}`)
.then(res=>{
$(".con").text(res);
})
.catch(err=>{
console.log(err);
})
})
})

</script>
</body>
</html>

案例十二jsonp原理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp原理</title>
</head>
<body>

<script>
// 浏览器的同源策略
// 当浏览器向服务器请求数据(ajax)需要被请求的地址与当前的网址同源
// 同源:协议一致http 子域名一致 pan.baidu new.baidu 域名一致 qq.com 端口号一致:8081
// https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=__jp1

// script 标签的src属性没有同源策略限制
// 已经后后端约定好 返回的数据格式是 方法名(数据) jp({data...}) 执行函数并传参
function jp(data){
console.log(data);
}
// jp({name:"mumu",age:18})
</script>
<script src="https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82&callback=jp"></script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp原理</title>
</head>
<body>

<script>
function abc (data){
alert(data);
}
// 127.0.0.1/weather.txt
// ajax 获取会有浏览器的同源策略的限制
// script 标签 src没有同源策略限制
</script>
<script src="http://127.0.0.1/weather.php?callback=abc"></script>

</body>
</html>

案例十四jsonp封装方法 一直写到会为止

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp方法丰富</title>
</head>
<body>

<script>
function jsonp(url,option={callback:"callback",jp:"jp"}){

return new Promise((resolve,reject)=>{
var callback = option.callback||'callback'; //传个后端get参数
var jp = option.jp||"jp"; //传给后端callback的值
url = url+`&${callback}=${jp}`;//url 添加 &callback=jp;
// 创建一个函数 函数名和jp 保持一致
window[jp]=data=>{ //------------定义一函数叫jp
resolve(data); //函数执行 返回值
}

// 动态的创建一个script标签
var script = document.createElement("script");
// 指定script的src值
script.src = url; // ----------执行jp方法 执行jp(data)
// 插入script标签到head里面
var head = document.querySelector("head");//获取head标签
head.append(script);//head 插入script标签

script.onload=function(){
head.removeChild(script);//当加载成功移除script标签
}
script.onerror = function(e){
head.removeChild(script);
reject(e);//返回错误
}
})
}
var urlB = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E6%B2%B3%E5%8D%97&city=%E9%83%91%E5%B7%9E%E5%B8%82";
var urlA = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1598407894753"
jsonp(urlA)
.then(res=>{
console.log(res)
return jsonp(urlB)
})
.then(res=>{
console.log(res);
})
.catch(err=>console.log(err));

// var urlC = "http://127.0.0.1/weather.php?";
// jsonp(urlC)
// .then(res=>{
// console.log(res);
// })

// 目标
/* jsonp(url)
.then(res=>{//res就是数据}) */
// 传入参数:url 地址 函数名称jp callback传入后端参数
// 返回:promise对象
// 复习 promise
/* var p = new Promise((resolve,reject)=>{
if(xxx){resolve(yyy)}
else{reject(zzz)}
})
p.then(res=>{})
.catch(err=>{}) */
</script>
</body>
</html>

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

小白学习ajax

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 小白学习ajax
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏