首页 未命名正文

linux编程_Ajax的概述与实现历程

云返利网 未命名 2020-05-26 09:05:55 11 0

一、ajax概述

1、Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新手艺,而是对现有手艺的综合利用。这一手艺能够向服务器请求分外数据而无需刷新页面,带来了更好的用户体验

2、Ajax手艺的焦点是XMLHttpRequest工具(简称XHR),这是由微软首先引入的一个特征。在XHR泛起之前,Ajax式的通讯必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。

3、XHR为向服务器发送请求和剖析服务器响应提供了流通的接口。能够以异步的方式从服务器取得更多的信息,意味着用户单击后,可以不必刷新页面也能获取新数据。也就是说可以使用XHR工具取得新数据,然后再通过DOM将新数据插入到页面中

4、虽然Ajax名字中有XML的身分,然则呢,Ajax通讯与数据花样无关,这种手艺就是无须刷新页面即可从服务器取得数据,但不一定是XML数据

二、操作:原生ajax和jQuery中封装的ajax

1、原生ajax:

ajax作用:发送请求(设置请求setRequest) 吸收响应(getResponse)

A、ajax原生方式发送请求:

Ajax中最主要也是最牢固的部门就是http请求。

1)    确立毗邻: (IE7及以上版本都支持XMLHttpRequest)

1 var xhr = new XMLHttpRequest(); //建立异步请求工具

2)    Get请求:花样必须是(url?name1=value1&name2=value2)

1 xhr.open("get","01-register.php?name="+name);//初始化异步get请求
2 xhr.send(null); //与服务器确立毗邻

3)    Post请求

1 xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
2 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
3 xhr.send('name=rose&age=20'); //请求报文体

4)    get和post请求的区别:

get不需要设置请求头,而post需要设置请求头

get的数据通报通过url举行,而post的数据在send方式中通报

B、ajax原生方式吸收响应:
1 /*监听服务器的响应*/
2 xhr.onreadystatechange=function(){
3     /*判断当前的响应是否乐成  1.服务器做出了响应  2.响应的结果是准确的*/
4     if(xhr.status==200 && xhr.readyState==4){
5         var result=xhr.responseText;
6         console.log(result); //输出从服务器中获取到的数据
7     //接下来就可以对数据举行响应的处置了
8     }
9 };
C、处置响应数据:
 1 /*监听*/
 2 xhr.onreadystatechange=function(){
 3     if(xhr.status==200 && xhr.readyState==4){    /*判断状态*/
 4         var result;
 5         /*获取响应报文中的Content-Type*/
 6         var ct=xhr.getResponseHeader("Content-Type");
 7         /*判断Content-Type,举行数据的剖析*/
 8         if(ct.indexOf("xml") != -1){
 9             result=xhr.responseXML;
10         }
11         else if(ct.indexOf("json") !=-1){
12             result=JSON.parse(xhr.responseText);
13         }
14         else{
15             result=xhr.responseText;
16         }
17         /*挪用回调函数--委托--署理*/
18         success && success(result);
19     }
20 };

2、jQuery中封装的ajax

1 $.ajax({
2     type: 请求方式(get/post),
3     url: "register.php",
4     data:  发送请求数据,
5     beforeSend:function(){返回false可以作废本次ajax请求},
6     success:function(result){ 乐成响应后挪用 },
7     error:function(err){ 错误响应时挪用 },
8     complete:function(){  响应完成时挪用(包罗乐成和失败) }
9 });

jQuery中提供了专门的方式来序列化表单:

1 $('form').serialize():   //序列化表单(即花样化key=val & key=val);

三、响应

我们需要监听服务器的响应状态,然后对从服务器中获取的数据做响应的处置。

1)    onreadystatechange是JavaScript事宜中的一种,用于监听XMLHttpRequest的状态

2)    readystate:响应状态,返回XMLHTTP请求的当前状态

readyState 状态

状态说明

(0)未初始化

此阶段确认XMLHttpRequest工具是否建立,并为挪用open()方式举行未初始化作好准备。值为0示意工具已经存在,否则浏览器会报错--工具不存在。

(1)载入

此阶段对XMLHttpRequest工具举行初始化,即挪用open()方式,凭据参数(method,url,true)完成工具状态的设置。并挪用send()方式最先向服务端发送请求。值为1示意正在向服务端发送请求。

(2)载入完成

此阶段吸收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2示意已经吸收完所有响应数据。并为下一阶段对数据剖析作好准备。

(3)交互

此阶段剖析吸收到的服务器端响应数据。即凭据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的花样,为在客户端挪用作好准备。状态3示意正在剖析数据。

(4)完成

此阶段确认所有数据都已经剖析为客户端可用的花样,剖析已经完成。值为4示意数据剖析完毕,可以通过XMLHttpRequest工具的响应属性取得数据。

3)    status:服务器的响应码

常见响应码:200—服务器乐成返回网页

                      404—请求网页不存在

                      503—服务不可用

【关于云返利网】

云返利网是阿里云、腾讯云、华为云产品推广返利平台,在各个品牌云产品官网优惠活动之外,云返利网还提供返利。您可以无门槛获得阿里云、华为云、腾讯云所有产品返利,在官网下单后就可以领取,无论是自己用、公司用还是帮客户采购,您个人都可以获得返利。云返利网的目标是让返利更多、更快、更简单!详情咨询13121395187(微信同号)