01第1节:什么是Ajax?
对于AJAX来说,它并不是什么新技术,而是JavaScript中一种通信方式。它的核心作用是从远程获取数据时,只是局部刷新,而不是将整个页面刷新。
也就是说,在Html页面上提交或获取数据时,不是将整个Html提交全部请求或加载,而在整个Html中,哪个区域的数据要动态发生变化,则只在这个区域请求和加载。
避免了请求和加载全部页面,导致增加网络负担、且对用户的体验也不好。
开发者经常提起的无刷新,就是AJAX来实现的,局部更新数据。
AJAX的英文全名称是AsynchronousJavaScriptandXML,这是最早的一种称呼,不过,现在的AJAX功能与最初的AJAX功能已经发生了变化,不再使用XML作为传输对象了,而是使用JSON格式的数据或其它更简洁的数据格式。
简短地说,在不加载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
如今的各种APP也都使用了AJAX技术从远程的服务器上获取数据,已经成为最基本的用户体验了,因此,AJAX技术对于Web开发者来说,是必须%要掌握的技术。
02第2节:jQuery实现Ajax
在这里,首先我们要明白最基本的两种请求数据的方式:
HTTPGET请求:GET是获取的意思,是从远程服务器上根据一个API接口获取数据的请求方法,Get请求的URL地址会暴露在浏览器的地址栏中。GET请求安全性差,但可以让用户收藏到书签页里,便于日后查看。
HTTPPOST请求:POST主要用提交数据,将用户填写的信息提交到服务器上。如提交注册信息、提交调查信息等。POST请求安全性好,URL不会暴露在浏览器的地址栏中,但不能让用户收藏到书签中。
对于AJAX技术的实现:
使用原生的JavaScript可以实现,但是需要编写更多的代码来实现,且兼容性差,不同的浏览器需要编写额外的代码实现兼容。使用jQuery封装好的AJAX对象来实现,代码量小,使用简单,且还兼容所有主流浏览器。因此,使用jQuery实现AJAX技术是最佳选择,容错性也好。
03第3节:load()方法的AJAX实现
一、基本概念
在jQuery中,封装了能够实现AJAX技术的load()方法,该方法可以把远程服务器上的数据,以AJAX的方式加载到当前Html页面中的某个元素中,这样远程数据就可以在Html页面上显示出来了。
Ajax的load()方法的基本语法如下:
$(selector).load(URL,data,callback);
首先使用jQuery的选择器选择好要显示数据的Html元素。在获取的Html元素对象上使用load()方法。Load()方法的第1个参数为必选参数,用于指定加载数据的URL地址,通过这个URL地址可以得到有用的数据。Load()方法的第2个参数是可选的,用于向服务器发送请求时,一起发送的键值对形式的数据对象。Load()方法的第3个参数也是可选的,用于从服务器请求完成后执行的代码,在这里,我们可以得到拿到的执行反馈的结果,可以用来判断数据是否获取成功。二、远程加载文本文件内容
这里,我们使用jQuery的AJAX技术在服务器上加载一个文本文件,然后并在div元素中显示出来。
Yido.txt文本文件的内容如下:
h3一夜之间!美国彻底“失控”?任正非也做出了重磅决定!/h3pid=p1大家都知道,华为5G在国际市场上展露头角后,美国就开始各种试压打压华为了,不仅阻止华为在美国市场上销售,还游说各国拒绝和华为在5G方面的合作,之后将华为加入“实体名单”,谷歌响应美国做出的决定断供了华为,现在美国的手段就是从台积电下手了。/p
将上面的*.txt文件存放在服务器的某个文件夹下。
然后使用jQuery的Load()方法将Yido.txt文件中的内容从远程服务器上加载到客户端,并在div标记中显示出来。
Html+jQuery代码如下:
!DOCTYPEhtmlhtmlheadtitle一都编程,每个知识就是一个案例。/titlescriptsrc=jquery-3.3.1.js/scriptscripttype=text/javascriptfunctionAJAXLoadData(){vardiv1=$(#div1);div1.load(