AJAX
来源:互联网 发布:java web 入门到精通 编辑:程序博客网 时间:2024/06/06 04:52
HTTP请求的过程
HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤:
建立TCP连接
在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共同构建Internet,即著名的TCP/IP协议族,因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议,根据规则,只有低层协议建立之后才能进行更高层协议的连接,因此,首先要建立TCP连接,一般TCP连接的端口号是80。Web浏览器向Web服务器发送请求命令
一旦建立了TCP连接,Web浏览器就会向Web服务器发送请求命令。例如:GET/sample/hello.jsp HTTP/1.1。Web浏览器发送请求头信息
浏览器发送其请求命令之后,还要以头信息的形式向Web服务器发送一些别的信息,之后浏览器发送了一空白行来通知服务器,它已经结束了该头信息的发送。Web服务器应答
客户机向服务器发出请求后,服务器会客户机回送应答, HTTP/1.1 200 OK ,应答的第一部分是协议的版本号和应答状态码。Web服务器发送应答头信息
正如客户端会随同请求发送关于自身的信息一样,服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。Web服务器向浏览器发送数据
Web服务器向浏览器发送头信息后,它会发送一个空白行来表示头信息的发送到此为结束,接着,它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。Web服务器关闭TCP连接
一般情况下,一旦Web服务器向浏览器发送了请求数据,它就要关闭TCP连接,然后如果浏览器或者服务器在其头信息加入了这行代码:Connection:keep-alive
TCP连接在发送后将仍然保持打开状态,于是,浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间,还节约了网络带宽。
请求
- 方法动作:get post
- URL
- 请求头
- 请求体
GET
信息获取
使用URL传递参数
POST
修改服务器上资源
响应
-状态码(http://tool.oschina.net/commons?type=5)
(1** 信息类)
(2**成功)
(3**重定向)
(4**客户端错误)
(5**服务器错误)
-响应头
-响应体
readystate属性
0:请求未初始化,open 还没有调用
1:服务器连接已建立
2:请求已接受,收到响应头
3:请求处理中,收到响应主体,
4:请求已完成
XMLHttpRequest 和web 服务器进行数据异步交换
初始化-XHR发送请求-XHR取得响应
document.getElementById("search").onclick = function() { var request = new XMLHttpRequest(); request.open("GET", "server.php?number=" + document.getElementById("keyword").value); request.send(); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("searchResult").innerHTML = request.responseText; } else { alert("发生错误:" + request.status); } } }}
使用JSON 解析
两种方法:
eval()
JSON.parse()//推荐使用,可预告JSON中的错误
“JSONLint”校验JSON的工具
JQuery +AJAX
$(document).ready(function(){ $("#search").click(function(){ $.ajax({ type: "GET", url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(), dataType: "json", success: function(data) { if (data.success) { $("#searchResult").html(data.msg); } else { $("#searchResult").html("出现错误:" + data.msg); } }, error: function(jqXHR){ alert("发生错误:" + jqXHR.status); }, }); });
跨域
JSONP 只支持GET请求
<script>function jsonp(json){alert(json["name"]);}</script><script src="http://...."></script>
前端改动:
dataType :”jsonp”
jsonp:”callback”
后端改动:
$jsonp=$_GET["callback"];$result=$jsonp.'()'//PHP
- Ajax
- Ajax
- AJAX
- AJAX
- AJAX
- AJAX
- AJAX
- ajax
- ajax
- Ajax
- ajax
- ajax
- AJAX
- Ajax
- Ajax
- Ajax
- ajax
- ajax
- 应用跳转(Deep Link)
- 数据结构实验图论一:基于邻接矩阵的广度优先搜索遍历
- 第一次用Androud Studio:发生Execution failed for task ':app:transformClassesWithDexForDebug'
- Oracle找回被删除的数据
- CopyOnWriteArrayList源码分析
- AJAX
- 2091 空心三角形
- Combo Box用法
- 分布式与集群的区别
- leetcode 143. Reorder List
- HttpClient示例
- css针对各个浏览器的前缀是什么
- ecshop 后台订单导出
- php学习笔记06