小白学习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”)
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
服务器错误
案例解析读背
案例一
同步
案例二
ajax get
案例三
ajax get
案例四
案例五
案例六
案例七
案例八
案例九
案例十
案例十一