ajax

ajax

http

• 概念：客户端与服务器超文本无状态传输协议
• 请求方法
  1. options:测试有哪些方法可以用
  2. get：获取服务信息
  3. post:修改与更新，新增服务器信息
  4. put:新增
  5. delete:删除
  6. head:只返回头信息
  7. trace:回显头信息，用来测试
  8. connect管道形式连接
• 请求过程
  1. 建立tcp连接，客户端发送请求头+请求体，服务器响应请求tou+请求体，关闭tcp连接，客户端渲染内容
  2. 客户端发起http请求tcp连接
  3. 客户端（浏览器）发送请求信息（状态行 请求头 空行 请求头）
  4. 服务的响应请求信息（状态行 响应头 空行 响应体）
  5. 客服关闭tcp网络连接
  6. 客户端（浏览器）渲染内容

ajax

• 名称 异步的javascript and xml
• 原理
  1. 通过XMLRequest与服务器交换数据
  2. 服务数据通过json或者xml格式返回
  3. 浏览器端通过js+css渲染展示数据
• get/post
  1. 新建ajax对象
     var xhr=new XMLHttpRequest()
  2. 打开连接
     xhr.open(“POST”,url,false)
  3. 设置头信息（get省略）
     xhr.setRequestHeader(“Content-Type”:application/x-www-form-urlencoded");
  4. 监听事件
     xhr.onreadyStatechange=function(){
     if(xhr.ready4&&xhr.status200){}
     }
  5. 返回的数据 xhr.responseText
  6. 发送 xhr.send(“name=mumu&&age=18”)

jquery中ajax

• $.ajax()
• 第二层
  1. $.get
     • 回调函数
       $.get(url,function(data,status,xhr){})
       .done()
       .fail()
       .always()
       .then()
       .catch()
  2. $.post(url,data,function(data,status,xhr))
• 第三层
  1. $.getJSON()
  2. $.getScript()
  3. 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. 跨域方式
     • 服务器响应头信息跨域
       Access-Control-Origin:*
     • jsonp跨域
     • 服务器代理（开发）
  3. 异步同步 同步会阻塞代码执行

http响应码

• 1xx 请求开始
• 2xx 请求成功

1. 200 GET请求成功
2. 201 POST请求成功
3. 204 只返回请求头

• 3xx 重定向
  1. 301永久重定向
  2. 303资源
  3. 304资源没有修改
  4. 307重定向 该向Location里的URI重新发起
• 4xx请求地址错误
  1. 404资源地址错误
  2. 401没有权限
  3. 403禁止访问
• 5xx 服务端错误
  1. 500服务端错误
  2. 503服务端超载