Ajax的使用

2023-08-03 76

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Ajax的使用

1 全局刷新和局部刷新

1）全局刷新：使用form， href等发起的请求是全局刷新。

用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面。

缺点：

1. 传递数据量比较大。 占用网络的带宽
    2. 浏览器需要重新的渲染整个页面。 
    3. 用户的体验不是那么好

2）局部刷新：在当前页面中，发起请求，获取数据，更新当前页面的dom对象。对视图部分刷新。

特点：

1. 数量比较小， 在网络中传输速度快。
    2. 更新页面内容， 是部分更新页面， 浏览器不用全部渲染视图。
    3. 在一个页面中，可以做多个 局部刷新
    4. 从服务器获取的是数据， 拿到更新视图

2 异步请求对象

在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据。

异步对象是在浏览器内部的一种 javascript对象。各大浏览器都能支持异步对象的使用。chrome ,firework, ie, opper ,

异步对象 XMLHttpRequest

3. 异步对象XMLHttpRequest介绍

js中的一种对象，使用js语法创建和使用这个对象。

var xhr = new XMLHttpRequest();

之后就可以使用xhr对象的属性或者函数，进行异步对象的操作。

使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据。

局部刷新需要使用那些技术：

1）javascript ：创建XMLHttpRequest对象，调用它的属性或者方法

2）dom：处理dom，更新select的数据

3）css: 处理视图，更新，美化。

4）servlet：服务器端技术

5）数据格式：json。它之前是xml

把上面这些技术的综合使用叫做ajax（阿贾克斯）。

4 Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法

AJAX不是新的编程语言，它是多种技术的综合使用。包含了javascript, dom

,css, 服务器端技术， servlet ，jsp ，jdbc等等，还有 json数据格式。

使用AJAX实现局部刷新。

Ajax核心是 javascript 和 xml （json）：使用javascript操作异步对象XMLHttpRequest. 和服务器交换使用json数据格式。

5. 异步对象XMLHttpRequest属性和方法

创建异步对象，使用js的语法
var xhr = new XMLHttpRequest();
XMLHttpRequest方法
①）open(请求方式, 服务器端的访问地址，异步还是同步)
例如：xhr.open(“get”,“loginServlet”,true);
②）send(): 使用异步对象发送请求
XMLHttpRequest属性
readyState属性：请求的状态
0：表示创建异步对象时，new XMLHttpRequest();
1：表示初始异步对象的请求参数。执行open()方法
2：使用send()方法发送请求。
3：使用异步对象从服务器接收了数据
4：异步对象接收了数据，并在异步对象内部处理完成后。
status属性：网络的状态，和Http的状态码对应
200：请求成功
404：服务器资源没有找到
500：服务器内部代码有错误
responseText属性：表示服务器端返回的数据
例如： var data = xhr.responseText;

6. 异步对象XMLHttpRequest使用步骤

1）使用js创建异步对象

var xhr = new XMLHttpRequest();

2)给异步对象绑定事件。事件名称 onreadystatechange

例如button增加单击事件 onclick

xhr绑定事件

xhr.onreadysatechange=function() { 当事件发生时执行的代码 }

<input type="button" onclick="btnClick()" />
<script type="text/javascript">
    function btnClick(){
       按钮单击的处理代码
    }
</script>

在绑定事件中做什么，根据readyState值做请求的处理

xhr.readystatechagne=function(){
   if( xhr.readyState==4 && xhr.status==200 ){
        从服务器获取了数据， 更新当前页面的dom对象，完成请求的处理
        var data = xhr.responseText;
        更新dom对象
        document.getElementById("#mydiv").innertHTML = data;
   }
}

初始请求的参数，执行open()函数
xhr.open(“get”,“loginServlet”,true)

4)发送请求，执行send()

xhr.send()

7 同步请求和异步请求

看open(请求方式，访问uri地址，boolean是不是异步的)

true：异步请求

false：同步请求

8.jquery实现Ajax

使用jquery提供的函数实现ajax请求的处理。代替直接使用XMLHttpRequest. 但是jquery实际还是使用的异步对象。

$.ajax() 核心的函数

语法： $.ajax( { json格式的参数} )

json格式的参数：key是定义好的，需要开发人员给key赋值。这些key是用来表示ajax请求必须的参数

例如，请求的uri地址，是不是异步请求，请求的方式等等。

$.ajax(
  {
      url:"queryProvinceServlet",
      type:"get",
      data:{"name":"李四","age":20},
      dataType:"json",
      success:function(resp) { 开发人员获取数据，更新dom对象 },
      error:function(){ alert("请求错误")}
  }
)

url：服务器的地址，例如某个servlet的访问地址。 queryProvinceServlet

type:表示请求的方式，get，post。默认是get。这个值不用区分大小写

data：表示提交的请求参数。可以是string，数组， json类型的。推荐使用json格式。

例如： data: {“name”:“李四”,“age”:20}

jquery在发送请求时，会把json中的key作为请求的参数使用， key对应的值作为参数数据。

转为的结果： http://localhost:8080/javaweb/queryProvinceServlet?name=李四&age=20

dataType: 数据格式，可以是 html， text ， xml ，json等等。表示发起请求后，希望服务器端返回的数据格式。 jquery可以尝试使用对应格式处理返回的数据。比如你指定了 dataType:json,表示希望服务器返回的是json格式数据。然后jquery把json数据转为json对象。服务器代码可以获取到 dataType的内容。

例如：请求中 dataType:“json”, jquery发起请求后，

在请求头中 Accept: application/json, text/javascript, /; q=0.01

如果dataType:“text”, 请求中

Accept: text/plain, /; q=0.01

success: 函数function。当服务器端返回了数据，jquery处理完数据后，执行这个函数。等同于异步对象的 readyState==4 $$ status=200的情况

例如： success:function( data){ 开发人员处理服务器返回的数据 }

data是自定义形参，相当于 data= xhr.responseText

error:function(), 当请求错误时，执行这个函数。

contentType:表示请求的参数数据格式。例如 application/json , 这个内容可以不写。

async: 是一个boolean表示请求是同步的还是异步的。 true是异步的，默认是true； false同步的.