首页 > 代码库 > ajax知识介绍

ajax知识介绍

2024-08-13 10:06:53   222人阅读

AJAX编程

即 Asynchronous [e‘s??kr?n?s] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

1.1、 异步

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

XMLHttpRequest可以以异步方式的处理程序。

2.2、 XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。

```javascript /js 内置的 http 请求对象 XMLHttpRequest/

/*1.怎么使用 这个内置对象*/var xhr = new XMLHttpRequest;/*2.怎么样去组请求*//*请求的行*/xhr.open(‘post‘,‘01.php‘);/*请求头*///get  没有必要设置//post 必须设置 Content-Type: application/x-www-form-urlencodedxhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);/*请内容*//*3.发送请求*/xhr.send("name=xjj&age=10");

```

2.2.1、请求

HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

1、请求行

xhr.open(‘post‘,‘01.php‘);

2、请求头

xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);get请求可以不设置

3、请求主体

xhr.send("name=xjj&age=10");get可以传空

注意书写顺序

2.2.2、响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

javascript if(xhr.readyState == 4 && xhr.status == 200){ console.log(‘ok‘); console.log(xhr.responseText); /*把内容渲染在页面当中*/ document.querySelector(‘#result‘).innerHTML = xhr.responseText; }readyState 0：请求未初始化（还没有调用 open()）。 1：请求已经建立，但是还没有发送（还没有调用 send()）。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 4：响应已完成；您可以获取并使用服务器的响应了。

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态

1、获取状态行（包括状态码&状态信息）

xhr.status 状态码xhr.statusText 状态码信息

2、获取响应头

xhr.getResponseHeader(‘Content-Type‘);xhr.getAllResponseHeaders();

3、响应主体

xhr.responseTextxhr.responseXML

我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

2.3.3、API详解
xhr.open() 发起请求，可以是get、post方式xhr.setRequestHeader() 设置请求头xhr.send() 发送请求主体get方式使用xhr.send(null)xhr.onreadystatechange = function () {} 监听响应状态xhr.status表示响应码，如200xhr.statusText表示响应信息，如OKxhr.getAllResponseHeaders() 获取全部响应头信息xhr.getResponseHeader(‘key‘) 获取指定头信息xhr.responseText、xhr.responseXML都表示响应主体

注：GET和POST请求方式的差异（面试题）

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send(‘name=itcast&age=10‘)

4、POST需要设置

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制

问题？如何获取复杂数据呢？

2.3、 XML

1、必须有一个根元素 2、不可有空格、不可以数字或.开头、大小写敏感 3、不可交叉嵌套 4、属性双引号（浏览器自动修正成双引号了） 5、特殊符号要使用实体 6、注释和HTML一样 虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

xml <?xml version="1.0" encoding="UTF-8"?> <root> <arrayList> <array> <src>images/banner.jpg</src> <newPirce>12.00</newPirce> <oldPrice>30.00</oldPrice> </array> <array> <src>images/banner.jpg</src> <newPirce>12.00</newPirce> <oldPrice>30.00</oldPrice> </array> </arrayList> </root>```php <?php header(‘Content-Type:text/xml;charset=utf-8‘); /以xml格式传输数据的时候要求响应内容格式是 text/xml/

/*file_get_contents 获取文件内容*/$xml = file_get_contents(‘01.xml‘);/*输出xml内容*/echo $xml;

?> javascript var xhr = new XMLHttpRequest; xhr.open(‘get‘,‘01.php‘); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ /获取到XML格式内容 放回的是DOM对象 document/ var xml = xhr.responseXML; /通过选着器可以获取到xml的数据/ console.log(xml.querySelectorAll(‘array‘)[0].querySelector(‘src‘).innerHTML); } } ```

2.4、 JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

1、数据在名称/值对中 2、数据由逗号分隔(最后一个健/值对不能带逗号) 3、花括号保存对象方括号保存数组 4、使用双引号

JSON [ {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"}, {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"}, {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"} ]

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取

1、PHP解析方法 jsonencode()、jsondecode() ```PHP <?php header(‘Content-Type:text/html;charset=utf-8‘); /以json格式传输数据的时候要求响应内容格式是 application/json/ /注意也可以不设置 但是这遵循的一个规范/

/*file_get_contents 获取文件内容*/$json = file_get_contents(‘01.json‘);/*输出json内容*/echo $json;echo ‘<br><br>‘;$array = array(    array(‘src‘=>‘images/detail01.jpg‘,‘newPrice‘=>‘12.00‘,‘oldPrice‘=>‘455.00‘),    array(‘src‘=>‘images/detail02.jpg‘,‘newPrice‘=>‘65.00‘,‘oldPrice‘=>‘878.00‘),    array( ‘src‘=>‘images/detail01.jpg‘,‘newPrice‘=>‘100.00‘,‘oldPrice‘=>‘1000.00‘));/*将php数组转化成json字符*/$json_array = json_encode($array);echo $json_array;echo ‘<br><br>‘;/*将json字符转化成php数组*/$array_json = json_decode($json_array);echo $array_json;echo ‘<br><br>‘;

?>**1、Javascript 解析方法** JSON对象 JSON.parse()、JSON.stringify()； JSON兼容处理json2.js 总结：JSON体积小、解析方便且高效，在实际开发成为首选。javascript var xhr = new XMLHttpRequest; xhr.open(‘get‘,‘01.php‘); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ /获取仅仅是字符串/ var text = xhr.responseText;

        /*需要把字符串转化成JSON对象*/        var json_obj = JSON.parse(text);        console.log(json_obj);        /*我们也可以把JSON对象转化成字符串*/        var json_str = JSON.stringify(json_obj);        console.log(json_str);    }}

```

2.5、 兼容性

关于IE的兼容方面，了解即可。 ```javascript function XHR() { var xhr; try { xhr = new XMLHttpRequest(); } /如果 try内的程序运行错误 抛出异常 捕捉异常 上面程序当中运行的错误/ catch(e) { /在不同的IE版本下初始 ActiveXObject 需要传入的标识/ var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

        for (var i=0;i<IEXHRVers.length;i++) {            try {                xhr = new ActiveXObject(IEXHRVers[i]);            }            catch(e) {                /*如果出现错误的时候  停止当次的循环*/                continue;            }        }    }    return xhr;}

```

2.6、 封装ajax工具函数

```javascript /** * ITCAST WEB * Created by zhousg on 2016/5/24. / / * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异步的还是同步的 async false true * 4. 请求内容的格式 contentType * 5. 传输的数据 data json对象 * * 6.响应成功处理函数 success function * 7.响应失败的处理函数 error function * * 这些都是动态参数 参数对象 options * */

/封装一个函数/ window.$ = {}; /申明一个ajax的方法/ $.ajax = function(options){

if(!options || typeof options != ‘object‘){    return false;}/*请求的类型*/var type = options.type || ‘get‘;/*默认get*//*请求地址 */var url = options.url || location.pathname;/*当前的地址*//*是异步的还是同步的 */var async = (options.async === false)?false:true;/*默认异步*//*请求内容的格式 */var contentType = options.contentType || "text/html";/*传输的数据 */var data = http://www.mamicode.com/options.data || {};/*｛name:‘‘,age:‘‘｝*/>

} $.post = function(options){ options.type = ‘post‘; $.ajax(options); } $.get = function(options){ options.type = ‘get‘; $.ajax(options); }

```

2.7、 jquery的ajax

  • jQuery为我们提供了更强大的Ajax封装
  • $.ajax({}) 可配置方式发起Ajax请求
  • $.get() 以GET方式发起Ajax请求
  • $.post() 以POST方式发起Ajax请求
  • $(‘form‘).serialize() 序列化表单（即格式化key=val&key=val）
  • url 接口地址
  • type 请求方式
  • timeout 请求超时
  • dataType 服务器返回格式
  • data 发送请求数据
  • beforeSend: function () {} 请求发起前调用
  • success 成功响应后调用
  • error 错误响应时调用
  • complete 响应完成时调用（包括成功和失败）
  • jQuery Ajax介绍
  • http://www.w3school.com.cn/jquery/jqueryrefajax.asp

ajax知识介绍


联系
我们