AJAX | HTTP

最新推荐文章于 2022-11-28 11:16:39 发布

孤岛浅滩

最新推荐文章于 2022-11-28 11:16:39 发布

阅读量668

点赞数

分类专栏： notes 文章标签： ajax xmlhttprequest http

本文链接：https://blog.csdn.net/m0_37851778/article/details/77658228

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

一 Ajax

AJAX is not a programming language.

lt is just a technique for creating better and more interactive web applications.

1.XMLHttpRequest用于在后台与服务器交换数据。

2.创建XMLHttpRequest对象—浏览器与服务器之间数据交换的桥梁

var xhr;
if(window.XMLHttpRequest){
    //code for IE 7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
}else{
    //code for IE5 , IE6
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

3.使用XMLHttpRequest对象的open()和send()方法将请求发送至服务器

xhr.open(method,url,async);
xhr.send(string);

这里写图片描述

4.GET || POST

1.大部分情况下可用GET---更简单、更快

2.以下情况使用POST请求：
a)无法使用缓存文件（更新服务器上的文件或数据库）---updata
b)向服务器发送大量数据（POST没有数据量限制）---size
c)发送包含未知字符的用户输入时，POST比GET更加稳定和可靠。---unknown character

5.通过AJAX,JavaScript无需等待服务器的相应，而是：

    1.在等待服务器响应时执行其他脚本
    2.在响应就绪后对相应进行处理

6.当使用async = true时（异步），规定在相应处于onreadystatechange事件中的就绪状态时执行的函数

<script type='text/javascript'>
function loadXMLDoc(){
    var xhr;
    if(window.XMLHttpRequest){
        //code for IE 7+, Firefox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
    }else{
        //code for IE5 , IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            document.getElementById('myDiv').innerHTML = xhr.responseText;
        }
    }
    xhr.opne('GET','/ajax/text1.txt',true);
    xhr.send();
}
</script>

7.当async = false时（同步），JavaScript会等到服务器相应就绪后才继续执行。如果服务器繁忙或缓慢，应用程序就会被挂起或停止。

<script type='text/javascript'>
function loadXMLDoc(){
    var xhr;
    if(window.XMLHttpRequest){
        //code for IE 7+, Firefox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
    }else{
        //code for IE5 , IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.opne('GET','/ajax/text1.txt',false);
    xhr.send();
    document.getElementById('myDiv').innerHTML = xhr.responseText;
}
</script>

8.服务器响应

如需获得来自服务器的响应，可使用XMLHttpRequest对象的responseText或responseXML属性。

responseText属性返回字符串形式的响应：
    document.getElementById('myDiv').innerHTML = xhr.responseText;

这里写图片描述

books.xml:
<bookstore>
<book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
</book>
<book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
</book>
    <book category="web" cover="paperback">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
</book>
<book category="web">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
</book>
</bookstore>

<head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xhr,txt,x,i;
        if(window.XMLHttpRequest){
            //code for IE 7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        }else{
            //code for IE5 , IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.onreadystatechange = function(){
            if(xhr.readyState ==4 && xhr.status == 200){
                xmlDoc = xhr.responseXML;
                text = "";
                x = xmlDoc.getElementsByTagName('title');
                for(i = 0; i < x.length; i++){
                    txt = txt + x[i].childNodes[0].nodeValue + '<br />';
                }
                document.getElementById('myDiv').innerHTML = txt;
            }
            xhr.open('GET','/example/xmle/books.xml',true);
            xhr.send();
    }
</script>
</head>
<body>
    <h2>My Book Collection:</h2>
    <button type = 'button' onclick = 'loadXMLDoc()'>
        获得我的图书收藏列表          
    </button>
</body>

9.处理服务器响应

1.在处理服务器返回的数据之前，我们首先要知道服务器处理请求的状态（已返回数据还是处理出错了）

2.XMLHttpRequest对象的三个重要属性
a)onreadystatechange:存储函数（或函数名）,每当readyState改变时，就会调用该函数。
b)readyState：标识当前XMLHttpRequest对象处于什么状态，它有5个状态：
    0：unsent---未初始化状态---此时，已经创建了一个XMLHttpRequest对象。
    1：opened---准备发送状态---此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端。
    2：Headers_received----已经发送状态----此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应。
    3：loading---正在接收状态---此时，已经收到HTTP响应头部信息，但是消息体部分还没有完全接收到。
    4：done---完成响应状态----此时，已经完成了HTTP响应的接收。
c)status---标识响应的HTTP状态码：
    200： "OK"
    404：未找到页面
    500：（内部服务器错误）响应代码

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        //要执行的任务
    }
};

10.Callback函数：以参数形式传递给另一个函数的函数。

var xhr;
function loadXMLDoc(url,cfunc){
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = cfunc;
    xhr.open("GET",url,true);
    xhr.send();
}
function myFunction(){
    loadXMLDoc("/ajax/test1.txt",function(){
        if(xhr.readyState == 4 && xhr.status ==200){
            document.getElementById('myDiv').innerHTML = xhr.responseText;
        }
    });
}

参考：
【Ajax快速入门】http://codesnote.com/
【AJAX教程】http://www.w3school.com.cn/ajax/index.asp

二图解HTTP——了解Web及网络基础

1.客户端：通过发送请求获得服务器资源的Web浏览器。

2.制定HTTP的初衷—-解决文本传输问题

3.三项WWW构建技术

1.把SGML(Standard Generalized Markup Language,标准通用标记语言)作为页面的文本标记语言的HTML(HyperText Markup Language,超文本标记语言)
2.作为文档传输协议的HTTP(HyperText Transfer Protocol)
3.指定文档所在地址的URL(Uniform Resource Locator,统一资源定位符)

4.现代浏览器的祖先NCSA( National Center for Supercomputer Applications，美国国家超级计算机应用中心 )—-Mosaic

5.TCP/IP协议族

IEEE:Institute of Electrical and Electronic Engineer,电气和电子工程师协会
ICMP:Internet Control Message Protocol,互联网控制报文协议
IP:Internet Protocol,网际协议
PPPoE:Point-to-Point Protocol over Ethernet,基于以太网的点对点通讯协议
DNS:Domain Name System,域名系统
TCP:Transmission Control Protocol,传输控制协议
FDDI:Fiber Distributed Data Interface,光纤分布式数据接口
HTTP:HyperText Transfer Protocol,超文本转移协议
SNMP:Simple Network Management Protocol,简单网络管理协议
UDP:User Data Protocol,用户数据报协议
FTP:File Transfer Protocol,文件传输协议

6.IP协议的作用—-把各种数据包传送给对方。其中最重要的两个条件是IP地址和MAC(Media Access Control)地址。

7.ARP协议(Address Resolution Protocol)，是一种用于解析地址的协议，根据通信方的IP地址就可以反查出对应的MAC地址

8.TCP位于传输层，提供可靠的字节流服务：

1.字节流服务(Byte Stream Service)是指，为了方便传输，将大块数据分割成以报文段(segement)为单位的数据包进行管理----化整为零
2.可靠：能够确认数据最终是否送达到对方----快递是否收到

9.三次握手策略(three-way handshaking)—TCP的标志(flag)—-SYN(synchronize)和ACK(acknowledgement)

这里写图片描述

孤岛浅滩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录