Ajax知识

最新推荐文章于 2023-01-13 16:43:22 发布

chang _an

最新推荐文章于 2023-01-13 16:43:22 发布

阅读量241

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_50613702/article/details/109745040

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax

1.1简介

Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

1.2AJAX技术应用带来的好处

ajax是一项JavaScript扩展的技术,ajax代码写在js中.
ajax技术最重要的功能是能够发出局部刷新的请求到后台servlet,servlet处理完请求后,为ajax响应一个返回值.ajax拿到返回值后,处理前端的业务逻辑.

1.3Ajax的优缺点

Ajax的优点：
1.不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
2.ajax性能较高
3.AJAX使用Javascript技术向服务器发送异步请求
Ajax的缺点：
1.AJAX并不适合所有场景，很多时候还是要使用同步交互
2.AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大
3.因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题

1.4同步和异步

同步
同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求，在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
异步
步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行
总结
同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果

1.5实现步骤

1、创建XMLHttpRequest对象
不同的浏览器使用的异步调用对象也有所不同,在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象,而在Netscape、Firefox浏览器中则直接使用XMLHttpRequest组件。因此,在不同浏览器中创建XMLHttpRequest对象的方式都有所不同.
在IE浏览器中创建XMLHttpRequest对象的方式如下所示:

var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

在Netscape浏览器中创建XMLHttpRequest对象的方式如下所示:

var xmlHttpRequest = new XMLHttpRequest();

2、创建HTTP请求
创建了XMLHttpRequest对象之后,必须为XMLHttpRequest对象创建HTTP请求,用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据.
创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:
XMLHttpRequest.open(请求方式,url地址,参数（布尔类型）,name,password)

name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。
password：该参数为可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。通常可以使用以下代码来访问一个网站文件的内容。
注意：如果HTML文件放在Web服务器上，在Netscape浏览器中的JavaScript安全机制不允许与本机之外的主机进行通信。也就是说，使用open()方法只能打开与HTML文件在同一个服务器上的文件。而在IE浏览器中则无此限制（虽然可以打开其他服务器上的文件，但也会有警告提示
3、设置响应HTTP请求状态变化的函数
创建完HTTP请求之后，应该就可以将HTTP请求发送给Web服务器了.然而，发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始，到发送数据、接收数据

1.未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时readyState属性值为0。

2.初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时readyState属性值为1。

3.发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时readyState属性值为2。

4.接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，此时readyState属性值为3。

5.完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时readyState属性值为4
			XMLHttpRequest对象可以响应readystatechange事件，该事件在XMLHttpRequest对象状态改变时（也就是readyState属性值改变时）激发
因此，可以通过该事件调用一个函数，并在该函数中判断XMLHttpRequest对象的readyState属性值

4、设置获取服务器返回数据的语句
如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕，就可以通过获取数据
但是，异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断XMLHttpRequest对象的status属性值，只有该属性值为200，才表示异步调用成功5、发送HTTP请求

   在经过以上几个步骤的设置之后，就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法，其语法代码如下所示：

   XMLHttpRequest.send(data)

   其中data是个可选参数，如果是get请求的数据写在url中，那这里即可以使用null来替代。如果是post请求，data参数的格式与在URL中传递参数的格式类似，以下代码为一个send()方法中的data参数的示例：

   name=myName&value=myValue

**另外，get和post请求发送请求的代码实现还有以下区别：**

    get请求需要防止客户端和服务器交互过程乱编码问题，注意在服务器配置编码格式或者把get请求的url用encodeURI方法处理转换为utf-8，而post则默认是utf-8编码，服务器端默认是IOS-8859-1，如果也遇到乱码问题，则在服务器端设置如下代码：

            **request.setCharacterEncoding("utf-8");**

而且根据http协议要求post请求需要额外设置请求头，如下：

              **xhr.setRequestHeader("Content-Type",**  **"application/x-www-form-urlencoded")**

   只有在使用send()方法之后，XMLHttpRequest对象的readyState属性值才会开始改变，也才会激发readystatechange事件，并调用函数

1.6、局部更新

   在通过Ajax的异步调用获得服务器端数据之后，可以使用JavaScript或DOM来将网页中的数据进行局部更新。

DOM技术的局部刷新

<html>

<head>

    <title>局部更新</title>

                            
    <script language="javascript" type="text/javascript">

                  < !--

            function changeData() {

                //查找标签（节点）

                var node = document.getElementById("myDiv");

                //在DOM中标签中的文字被认为是标签中的子节点

                //节点的firstChild属性为该节点下的第1个子节点

                //nodeValue属性为节点的值，也就是标签中的文本值

                node.firstChild.nodeValue = "更新后的数据";

            }

        -->

    </script>

</head>

</html>

chang _an

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax知识

Ajax1.1简介Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。1.2AJAX技术应用带来的好处ajax
复制链接

扫一扫