说起 Ajax, 可能是很多同学在很多地方都看到过, 各大招聘网站上对于 web 前端和 PHP 程序员的技能要求清单中也是必不可少的一项. 但是, Ajax 请求步骤详细代码以及说明却比较少见到
什么是 Ajax 引擎?
Ajax 引擎其实是一个 JavaScript 对象, 全写是 Windows.XMLHttpRequest 对象, 由于浏览器的版本不同, 特别是老版本的 IE 浏览器, 虽然也支持 Ajax 引擎, 但是写法上有区别, 在 IE 低版本中通常用 ActiveXObject 对象来创建 Ajax 引擎. Ajax 来自英文 "Asynchronous Javascript And XML" 的缩写, 也称为异步 JavaScript 和 xml. 简言之, 就是一个 JS 对象, 可以实现在网页加载完成以后, 不用刷新的情况下与服务器交互. 产生极好的用户体验效果.
Ajax 用来做什么?
Ajax 技术广泛应用于实现用户体验良好的一个个交互功能, 比如:
搜索产品时的关键词推荐
注册新用户的重名提示
现在网站几乎全部都使用 Ajax 技术, 最具有代表使用 Ajax 技术的网站有: 新浪微博, Google 地图, 百度搜索, 淘宝网等等.
Ajax 的实现原理
Ajax 的原理简单来说通过浏览器的 JavaScript 对象 XMLHttpRequest(Ajax 引擎) 对象向服务器发送异步请求并接收服务器的响应数据, 然后用 JavaScript 来操作 DOM 而更新页面. 这其中最关键的一步就是从服务器获得请求数据. 即用户的请求间接通过 Ajax 引擎发出而不是通过浏览器直接发出, 同时 Ajax 引擎也接收服务器返回响应的数据, 所以不会导致浏览器上的页面全部刷新.
Ajax 请求步骤详细代码
由于 Ajax 是一项从客户端发起, 和服务器进行交互的技术, 所以必须涉及两个方面: 客户端和服务器端, 下面咱们以会员注册的用户名为例给大家写一个 Ajax 的详细请求步骤和代码:
客户端代码 reg.html
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- Ajax 引擎实现用户名重名检测
- </title>
- </head>
- <body>
- <form>
- <p>
- 用户名:
- <input type="text" name="username" id="username" />
- <span id="result">
- </span>
- </p>
- <p>
- 密码:
- <input type="password" name="pwd1" />
- </p>
- <p>
- 确认密码:
- <input type="password" name="pwd2" />
- </p>
- <p>
- <input type="button" value="立即注册" />
- </p>
- </form>
- <script type="text/javascript">
- var username = document.getElementById('username');
- // 用户名输入框失去焦点时触发
- username.onblur = function() {
- // 主角登场 --Ajax 引擎的创建及使用详细代码来了
- var Ajax = new XMLHttpRequest(); // 创建 Ajax 引擎实例
- // 创建 GET 请求, 发送请求时传 username 值
- Ajax.open('GET', 'check.php?username=' + this.value);
- // 当 Ajax 引擎的状态产生改变时触发 onreadystatechange 属性指向的函数 (多次执行)
- // 状态值有 5 个: 0 1 2 3 4 , 其中 4 表示服务器端响应就绪
- Ajax.onreadystatechange = function() {
- // 必须在服务器响应就绪, 并且 HTTP 的状态码是 200 时才接收数据
- //Ajax.readyState 获取到服务器响应状态码, 必须是 4 才表示就绪
- //Ajax.status 获取到 HTTP 的状态码, 必须是 200 才表示成功
- if (Ajax.readyState == 4 && Ajax.status == 200) {
- //Ajax.responseText 接收服务器响应回来的内容
- //console.log(Ajax.responseText);
- // 接收到服务器响应数据后, Ajax 工作已完成, 可根据结果显示提示信息
- If(Ajax.responseText == '1') {
- result.innerHTML = '该用户名太受欢迎, 请重新选择';
- result.style.color = '#f00'; // 将字体设置为红色
- } else {
- result.innerHTML = '恭喜你, 可以注册';
- result.style.color = '#0a0'; // 将字体设置为绿色
- }
- }
- }
- Ajax.send(); // 发送请求
- }
- </script>
- </body>
- </HTML>
服务器端代码 check.PHP
- // 服务器端的代码可以使用 PHP 编写, 根据逻辑反馈数据给客户端实现验证功能
- $username=$_GET['username'];
- // 连接数据库的代码省略
- $sql="select id from users where username='$username'";
- $rs=mysqli_query($link,$sql); // 将构造好的 SQL 语句发到服务器上执行
- if( mysqli_num_rows($rs) ){
- echo '1'; // 如果用户名找到有结果, 证明该用户名已存在, 返回 1
- }else{
- echo '0'; // 如果用户名未找到结果, 证明该用户名不存在, 返回 0
- }
- // 关闭数据库连接, 释放结果集
== 附: Ajax 的方法和属性表 ==
方法:
属性:
最后, 注意一个重要的问题, XMLHttpRequest 对象是没有跨域能力的, 也就是说 Ajax 不能请求获得其它网站的数据, 那有没有解决办法呢? 答案是肯定的, 需要使用 JSONP
来源: https://www.jb51.net/article/148818.htm