Ajax和JQuery

最新推荐文章于 2024-09-14 18:52:56 发布

crud派大星

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量596

点赞数 1

文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/qdd6666/article/details/121483988

版权

第一章 Ajax 前端技术

前端技术：在浏览器中执行的程序都是前端， html ， css，js等等

后端技术：在服务器中执行的程序，使用java语言开发的后端程序。 servlet,jsp, jdbc,mysql,tomcat等等

1 全局刷新和局部刷新

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

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

缺点：

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

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

特点：

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

2 异步请求对象

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QEGugxXi-1637597861950)(images/image-20201012092218113.png)]

异步对象是在浏览器内部的一种 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;
   }

}