jQuery知识总结二

jQuery——Ajax
一、Ajax是什么
Ajax 全称为:“Asynchronous [e’sɪŋkrənəs] JavaScript and XML”
异步 JavaScript 和 XML
可以无刷新状态更新页面
二、HTTP是什么
http是计算网络通信的规则
HTTP是一种无状态协议(不建议持久连接)
无状态:是指协议对于事务处理没有记忆能力
HTTP的7个请求步骤
域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求,浏览器得到html代码 –> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) –> 浏览器对页面进行渲染呈现给用户
三、GET与POST请求的区别
get形式请求数据,参数会以明文的形式拼接在url地址的后面,请求的长度受到url地址格式的限制;一般敏感信息不建议用get方式
post形式请求数据,参数会打包到请求对象中进行传递,不会显示在url地址中。数据请求的安全性比较GET而言更加隐秘
get方式参数长度受url地址限制,post方式不受限制
get方式请求的数据可能使唤村里的信息,post方式不能缓存
四、ajax
ajax是异步的JavaScript与XML,是多种技术的集合
原生js实现ajax
1、创建XMLHttpRequest对象 var xhr=new XMLHttpRequesr()
2、打开接口 建立联系 xhr.open(参数1,参数2,[参数3])
参数1:请求方式 get post
参数2:接口 url路径
参数3:是否为异步 默认true 异步
3、发送数据 xhr.send();
4、增加状态改变事件
xhr.onreadystatechange=function(){
xhr.readyState 准备状态 4
xhr.status 状态码 200
xhr.responseText 数据
}
五、同步与异步
同步:不同的事情按照先后顺序执行,后一件事情必须等前一件事情执行完才能执行,否则处于等待状态
异步:不同事情同时执行,没有先后顺序
六、状态码
1xx:信息响应类,表示接收到请求并且继续处理
200(成功) 服务器已成功处理了请求。通常,这表示服务器提供了请求的网页。
3xx:重定向响应类,为了完成指定的动作,必须接受进一步处理
404(未找到) 服务器找不到请求的网页。例如,对于服务器上不存在的网页经常会返回此代码。
505(HTTP 版本不受支持) 服务器不支持请求中所使用的 HTTP 协议版本。
七、jQuery操作ajax
1、最底层$ajax()
参数:必须 对象{namevalue…}
对象里属性与属性值
url 请求的路径
data 待发送数据 值{}
dataType 返回数据类型"json", “html”, “text” ,…
success 回调函数 请求成功后调用的回调函数
type 请求的方式 “GET”, “POST” 默认get方式
beforeSend 函数 发送请求之前的函数
error 函数 请求失败后调用的函数
2、第二层方法
jquery对象.load(参数1,参数2,参数3)
load()常用于加载静态文件
1,参数1:url 必需 待加载的路径
2,data 可选,待发送的数据
3,callback 可选,回调函数 在函数内部返回请求的数据 回调函数上有三个可选函数:function(res,statusText,xhr){
res 返回结果 xhr.responseText
statusText 状态码对应的字符转
xhr XMLHttpRequest对象
}
$.get(参数1,参数2,参数3,参数4)
前三个参数与load()方法用法一样 参数4:可选 返回数据类型 “json”,“javascript”,“html”.“xml”,“json”,“text”…
. p o s t ( 1 2 3 4 ) .post(参数1,参数2,参数3,参数4) 用法与 get()方法一样
3、最高层方法
$.getScript((参数1,参数2)
参数1:必须 服务器请求地址
参数2:可选 回调函数
$.getJSON(参数1,参数2,参数3)
参数1:必须 服务器请求地址
参数2:可选 待发送的数据0
参数3:回调函数
八、json与jsonp的区别
json是一种数据类型
jsonp是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。(不支持post请求)
九、跨域
同源策略
协议
域名
端口号
跨域目的:为了实现数据的共享
跨域方法
1、jsonp
jsonp是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。(不支持post请求)
2、代理
3、PHP端修改header(XHR2方式) ie10以下版本不支持

猜你喜欢

转载自blog.csdn.net/weixin_48988929/article/details/107917701
今日推荐