Ajax全接触(一)基础理论

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013861109/article/details/53763621

什么是同步? 客户端要发起请求,服务器端要去处理,而且去响应,这时候客户端完全是等待,等待服务器端的处理和响应,当服务器端处理响应后客户端会重新载入页面。这时候如果你有错误,那么只能再次发起请求,再次等待。同步的事件会让人疯狂。

同步和异步

什么是同步

Paste_Image.png

客户端要发起请求,服务器端要去处理,而且去响应,这时候客户端完全是等待,等待服务器端的处理和响应,当服务器端处理响应后客户端会重新载入页面。这时候如果你有错误,那么只能再次发起请求,再次等待。同步的事件会让人疯狂。

什么是异步

Paste_Image.png

当你填写表单数据时,页面当时就把数据发送到服务器,也就是页面发送了个请求,服务器去做处理和响应,得到你的数据不符合要求,他会把响应结果,发给页面,但是在这个过程中,你还是可以依旧去填写,表单其他内容,这时候服务器告诉你有填写错误的地方,在页面上的表现,只是把你填写错误的旁边标上一行字,并没有刷新你的页面,这样在填写表单时,所有的错误信息都会显示在页面,你可以实时的更正,这个过程中你不会有整个页面的刷新,也不会有整个页面的提交和等待,当你最后点击提交一切都可以搞定了。

怎么实现Ajax技术呢?

  1. 运用HTML和CSS来实现页面,表达信息;
  2. 运用XMLHttpRequest对象和web服务器进行数据的异步交换;
  3. 运用JavaScript操作DOM,实现动态局部刷新;

Ajax-XMLHttpRequest对象创建

目前浏览器都支持标准的XHR对象,也支持标准的构造函数。

但是在IE5和IE6浏览器中,是不支持var request=new XMLHttpRequest();因为那时候XHR还未定义。

如何兼容IE5和IE6甚至更早的版本?

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

只需要判断下,如果有XHR定义,我们就使用标准的构造函数,我们直接 new ActiveXObject("Microsoft.XMLHTTP");就可以了。

Ajax-HTTP请求

什么是HTTP

HTTP是计算机,通过网络进行通信的规则。

它主要使我们客户,也就是常说的浏览器能够从服务器也就是常说的web服务器,去请求信息和服务。

Paste_Image.png

HTTP是一种无状态的协议

无状态指的是不建立持久的连接,也就是说服务端不保留连接的一些相关信息。

一个客户端,想服务器发送请求,然后web服务器返回响应,接着连接就被关闭了,这个处理过程是没有记忆的。如果后续的处理需要之前传递的一些信息,那么就要重新的传递。这就是经常说HTTP是一种无状态的协议。

概念介绍–HTTP请求

一个完整的HTTP请求过程,通常有下面7个步骤。

  1. 建立TCP连接;

  2. Web浏览器向Web服务器发送请求命令;

  3. Web浏览器发送请求头信息;

  4. Web服务器做出应答;

  5. Web服务器发送应答头信息;

  6. Web服务器向浏览器发送数据;

  7. Web服务器关闭TCP连接;

一个HTTP请求一般由四部分组成

  1. HTTP请求的方法或动作,比如是GIT还是POST请求;

  2. 正在请求的URL,总得知道请求的地址是什么吧;

  3. 请求头,包含一些客户端环境信息,身份验证信息等;

  4. 请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等。

Paste_Image.png

GIT请求和POST请求

  • GIT:一般用于信息获取
    使用URL传递参数
    对所发送信息的数量也有限制,一般在2000个字符

  • POST:一般用于修改服务器上的资源。
    对所发送信息的数量无限制

HTTP响应

一个HTTP响应一般由三部分组成

  1. 一个数字和文字组成的状态码,用来显示请求是否成功还是失败;

  2. 响应头,响应头也和请求头一样包含许多有用的信息,例如服务类型,日期时间,内容类型和长度等;

  3. 响应体,也就是响应正文;

Paste_Image.png

HTTP响应状态码介绍

HTTP响应状态码由3位数字构成,其中首位数字定义了状态码的类型:

  • 1XX:1开头,信息类,表示收到web浏览器请求,正在进一步的处理中;

  • 2XX:2开头,成功,表示用户请求被正确接收,理解和处理例如:200 OK;

  • 3XX:3开头,重定向,表示请求没有成功,客户必须采取进一步的动作;

  • 4XX:4开头,客户端错误,表示客户端提交的请求有错误,例如:404 NOT ;

  • Found,意味着请求中所引用的文档不存在;

  • 5XX:5开头,服务器错误,表示服务器不能完成对请求的处理:如 500;

Ajax-XMLHttpRequest发送请求

XMLHttpRequest对象的方法

方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 将请求发送到服务器。
string:仅用于 POST 请求

GET 请求:

request.open("GET","gte.php",true);
request.send();

POST 请求

request.open("POST","post.php",true);
request.send();

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=黄&sex=男");
方法 描述
setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
这个方法其实要设置HTTP的头信息,告诉web服务器我们要发送一个表单,
需要注意的是request.setRequestHeader方法要写在request.openrequest.send中间,否则将会抛出异常。

Ajax-XMLHttpRequest取得响应

获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
status和statueText 以数字和文本形式返回HTTP状态码。
gitAllResponseHeader() 获取所有的响应报头。
gieResponseHeader( parameter ) 查询响应的某个字段的值。 parameter 要查询的字段

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status 200: “OK”
404: 未找到页面
function but() {
    var request;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        request = new XMLHttpRequest();
    } else { // code for IE6, IE5
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {  //响应完成且请求成功
            //做一些事情  request.responseText;
        }
    }
    request.open("GET", "gte.php", true);
    request.send();
}

总结下Ajax使用的步骤

第一步

new一个XHM对象new XMLHttpRequest();

兼容写法

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

第二步

调用open方法

    request.open("GET", "gte.php", true);

第三步

将请求发送到服务器

    request.send();

第四步

对过程进行监听来知道服务器是否正确的做出了响应,接着就可以做一些事情

    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {  //响应完成且请求成功
            //做一些事情  request.responseText;
        }
    }

猜你喜欢

转载自blog.csdn.net/u013861109/article/details/53763621