Ajax的实现方法

本是古典何须时尚 2022-05-13 07:58 219阅读 0赞

# 如何实现Ajax #

本文章记录如何实现Ajax的几种方法：

# 文章目录  如何实现Ajax  @\[toc\] 准备工作:  导入相应的jQuery的jar包  什么是ajax  JSON  将对象转成json的方式:  前端用ajax的几种方法:  3.老师很喜欢的方法:$.getJSON---------------------依赖于jqury     准备工作: #

## 导入相应的jQuery的jar包 ##

![这里写图片描述][70]  
![这里写图片描述][70 1]

## 什么是ajax ##

> ajax全称Asynchronous JavaScript and XML（异步的JavaScript与XML），是网页无需刷新页面、使用js与服务器进行交互的一种技术。  
> 说白了, 就是无需页面跳转, 直接异步加载, 局部更新.

效果示例:  
![这里写图片描述][70 2]

> XMLHttpRequest在早期IE浏览器里是使用ActiveX来实现的，并不是浏览器自身的对象。后来其他各家浏览器也都实现了XMLHttpRequest对象，而高版本IE也把XMLHttpRequest改为了浏览器的内建对象。

### JSON ###

> JSON全称JavaScript Object Notation（js对象标记法），由Douglas Crockford在2002年发现并制定了标准。从名称上就可以看出来，JSON是基于JavaScript的，是JavaScript的一个子集。JSON是用JavaScript语法来表示数据的一种轻量级语言。  
> 说白了,就是一个数据交换的格式, 可以把数据转成”键值对”的形式,方便传输.

## 将对象转成json的方式: ##

![这里写图片描述][70 3]  
![这里写图片描述][70 4]

## 前端用ajax的几种方法: ##

\#\#\#1.很麻烦的办法:发送请求的方式：GET方式和POST方式 处理响应的方法：文本响应和XML响应  
例如：

//  (1) 创建XMLHttpRequest对象  
              //代码略
    //  (2) 设置回调函数
         xmlHttp.onreadystatechange =  function() {
    	 if ( xmlHttp.readyState == 4   &&   xmlHttp.status == 200 ) {
     		 // 根据不同的返回类型处理响应
              } 
    //  (3) 初始化XMLHttpRequest 组件
          xmlHttp.open( type, url, async );
    //  (4) 发送请求
          xmlHttp.send( null / string );

\#\#\#2.我很喜欢的方法:$.ajax(\{\});--------------------必须依赖jqury

$.ajax( {
        url : "发送的请求地址",
        type : "请求方式",
        data : "要发送的数据", 
        async: false,//异步变同步，参数为false的时候当前请求执行结束才会往下执行
        dataType : "服务器返回的数据类型",  // "xml  html  script  json  text"
        beforeSend : function(data)  {  // 发送请求前执行的代码  },
        //如果后台获得参数的时候有编码规定，则data需要换成下面两行代码：
        // contentType: "application/json;charset=utf-8",
        // data: JSON.stringify(condition),
        success : function(data)  {  // 发送成功后执行的代码  },
        error : function()  {  // 请求失败执行的代码  }
    } );

### 3.老师很喜欢的方法:$.getJSON---------------------依赖于jqury ###

![这里写图片描述][70 5]

[70]: /images/20220513/4e18a9d59cd1473a8bf2d043278b1d3f.png
[70 1]: /images/20220513/4c986713fb9b4af8a96f4a265b6dd493.png
[70 2]: /images/20220513/1822e3f5dfbb45339ed4b9c3bf8ba871.png
[70 3]: /images/20220513/cf9107c73b0843498f4fbdc23a9a4c1b.png
[70 4]: /images/20220513/b4fa56d729844c39839049e097f5db19.png
[70 5]: /images/20220513/11825424dba9406a89187b5159099ec1.png