JavaScript学习总结之JS、AJAX应用

  1、AJAX 简介

  AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页的技术。AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的网页(不使用 AJAX)如果需要更新内容或者用户注册信息、提交表单等,必需重新加载整个网页页面。所以说 AJAX 是一种与服务器交换数据并更新部分网页的艺术,因此我们必须掌握 AJAX 这种技术。

  AJAX 是基于现有的 Internet 标准,并且联合使用它们:

    ①、XMLHttpRequest 对象 (异步的与服务器交换数据)

    ②、JavaScript/DOM (信息显示/交互)

    ③、CSS (给数据定义样式)

    ④、XML (作为转换数据的格式)

  AJAX 的核心是 JavaScript 对象 XMLHttpRequest,他是一种支持异步请求的技术,也就是 XMLHttpRequest 赋予了我们可以使用 JS 向服务器提出请求并处理响应的能力,而不阻塞用户,通过这个对象,JS 可在不重载页面的情况下与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX 是一种独立于 Web 服务器软件的浏览器技术,也就是 AJAX 应用程序独立于浏览器和平台!可用于创造动态性更强的应用程序

  那么,简单说,AJAX 就是可以让 JS 去读取服务器上的数据,他的功能是可以在无需刷新页面的前提下,去服务器读取或者发送数据。可用来与 JSON 文件进行交互式通信,也可用来与数据库进行动态通信,还可用于创造动态性更强的应用程序。最常见的应用就是用户登录,在登录时,他就可以判断用户输入是否正确,如果输入正确,就直接显示用户信息,如果输入错误,提示错误信息,并不需要刷新页面。

  2、配置服务器

  AJAX 应用是异步更新,读取服务器上的数据,那到底服务器是什么东西呢?其实服务器就相当于 PC ,我们在平时浏览网页时,只需要在地址栏输入相应的网址,就可以浏览对应的页面,这些页面不可能存储在个人电脑中,那得需要多大的硬盘,并且还有其他影响因素,所以这些网页就存储在对应的服务器上,比如百度的服务器、新浪的服务器,其实服务器跟我们平时用的电脑没有什么多大的区别,个人计算机也可以作为服务器,甚至是手机之类的东西也可以作为服务器,比如我们用手机给电脑传照片,可以不通过数据线,使用 WIFI 或者腾讯提供的功能,就可以很轻松的完成传输过程,这时候手机就充当了服务器的角色,只不过性能比较差,仅对这一台机器提供服务而已。那么 Web 服务器就是可以同时对很多人提供服务,性能更强大。

  在学习 AJAX 时,就必须配置个人服务器,也就是要在本机搭建服务器程序,方便我们调试代码。通常都会使用 WAMP 来搭建服务器,本地服务器搭建程序有很多种,大家可以选一种自己喜欢的来搭建,这里就以 WAMP 为例,WAMP 即 Windows 下的 Apache + Mysql + PHP 集成安装环境,也就是 Win 平台上的服务器程序,而通常都使用 WampServer 这一服务器软件。我这里安装的是 WampServer 2.5,大家可以百度搜索 wamp 找到2.5版本下载安装,建议将程序装在 D 盘,安装完成之后,打开程序,在桌面右下角有一个 W 的图标,通常都为绿色,可在图标上点击右键,选择倒数第二个选项切换为中文,切换完成之后,接下来就是配置了,下面是我在网上找到的配置方法,并且使用没有问题,写在这里也省的去找了,现在 WampServer 已经更新到3.0版本了,根据安装的版本不同在百度搜索配置方法,都是一堆堆的。

  首先,用编辑器打开安装目录:D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 文件

  在516行或者搜索关键词找到:

#Include conf/extra/httpd-manual.conf

  将前面的井号去掉。

  然后,再打开:D:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf 文件

  在代码最后添加如下内容:

<VirtualHost *:80> DocumentRoot "D:/wamp/www" ServerName ServerAlias abc.com <Directory "D:/wamp/www"> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>

   为个人站点地址,可以自行定义。

  最后,打开:C:\Windows\System32\drivers\etc\hosts 文件

  添加:127.0.0.1

  重新启动WAMP。

  在需要做测试时,将页面保存在 D:/wamp/www 路径下,文件名保存为 index.html,然后在浏览器地址栏输入 abc.com 就可以打开刚才保存的页面。

  如果打开不成功,可百度搜索解决办法,可能是80端口被占用了。

  这里需要注意一下,放在服务器下的文件不能用中文命名。

  3、AJAX 基础

  首先,我们先来看一个 AJAX 应用的实例:请求并显示静态 TXT 文件

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwzwj.html