Ajax完整资料加代码

什么是Ajax？

答：Ajax是一种无需加载整个网页，就能够更新部分网页，与后台交互的技术。

Ajax的优点？

答：能够在不更新整个页面的前提下，维护数据。这使得Web程序可以更快速的回应用户的动作，而无需加载不必要的数据。

Ajax的缺点？

答：可能会破坏浏览器的后退和加入收藏书签等功能。

Ajax实现原理？

答：在浏览器中，提供了一个javascript的核心类--XMLHttpRequest，该类提供的方法可以帮我们发送HTTP请求，并接收Server的响应。

Ajax学习对象？

答：学习XMLHttpRequest核心类的属性和方法。

案例一：Ajax之GET

demo1.html

<!DOCTYPE html>
<html lang="zh" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><p>用户名:<input type="text" name="name" value=""><span id='rep'></span></p></body><script>//获取DOM对象var ipt = document.getElementsByName('name')[0];ipt.onblur = function(){var xhr = new XMLHttpRequest();xhr.open('get','demo1.php?name='+ipt.value,true);console.log(ipt.value);xhr.send(null);var sp = document.getElementById('rep');xhr.onreadystatechange = function(){//判断请求状态if(this.readyState == 4){if(this.responseText == 1) {sp.innerHTML = 'Yes';} else {sp.innerHTML = 'No';}}}}</script>
</html>

demo1.php

<?phpif($_GET['name'] == 'jack') {echo 1;} else {echo 0;}?>

案例二：Ajax之POST

demo2.html

<!DOCTYPE html>
<html lang="zh" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><p>用户名:<input type="text" name="name" value=""><span id='rep'></span></p></body><script>//获取DOM对象var ipt = document.getElementsByName('name')[0];ipt.onblur = function(){var xhr = new XMLHttpRequest();xhr.open('post','demo4.php',true);xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');var data = 'name='+this.value;xhr.send(data);var sp = document.getElementById('rep');xhr.onreadystatechange = function(){//判断请求状态if(this.readyState == 4){if(this.responseText == 1) {sp.innerHTML = 'Yes';} else {sp.innerHTML = 'No';}}}}</script>
</html>

demo2.php

<?phpif($_POST['name'] == 'jack') {echo 1;} else {echo 0;}?>

案例三 jQuery之Ajax实现方法

demo3.html

<!DOCTYPE html>
<html lang="zh_CN"><head><meta charset="utf-8"><title></title><script type="text/javascript" src="./jq.js"></script></head><body><input type="text" name="name" value="" /></body>
</html>
<script type="text/javascript">$('input:text').mouseout(function(){var data ={'name':this.value}console.log(data);$.POST/GET('demo3.php',data,function(res){if(res == 1) {console.log('Yes');} else {console.log('No');}});});
</script>?>

demo3.php

<?phpecho $_GET/POST['name'] =='jack'?1:0;
?>

Ajax完整资料加代码相关推荐

Ajax 完整教程 (转)
Ajax 完整教程第 1 页 Ajax 简介 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应 ...
(十二) 完整注释的代码摘录
title: 完整注释的代码摘录 date: 2019/4/23 20:40:00 toc: true --- 完整注释的代码摘录作者网页 #include <linux/kernel.h&g ...
不同浏览器 ajax,完整的 AJAX 写法(支持多浏览器)
代码如下: var xmlhttp; function Submit() { //1.创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { //IE7,I ...
PHP+Ajax点击加载更多列表数据实例
PHP+Ajax点击加载更多列表数据实例一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过"更多"按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的 ...
ajax简单实例代码,分享Ajax创建简单实例代码
XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而 ...
STM32驱动RC522读卡完整资料分享，包含原理图、PCB、驱动工程文件
一.原理图二.PCB 三.驱动程序 main.c #include "delay.h" #include "sys.h" #include "rc5 ...
Ajax入门教程（非常详细）动力节点ajax教程资料分享
Ajax教程 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式.快速动态网页应用的网页开 ...
三维空间刚体运动1：旋转矩阵与变换矩阵（详解加代码示例）
三维空间刚体运动1:旋转矩阵与变换矩阵(详解加代码示例) 1. 点.向量和坐标系 2.坐标系间的欧式变换 2.1 旋转 2.2 平移 3.齐次坐标和变换矩阵 4. 相似.仿射和射影变换 4.1 相似变 ...
黑马4天从浅入深精通SpringCloud 微服务架构（完整资料）
目录:/001 黑马4天从浅入深精通SpringCloud 微服务架构(完整资料) ┣━━day1 ┃ ┣━━01-课程介绍.mp4 ┃ ┣━━02-系 ...

Ajax完整资料加代码

Ajax完整资料加代码相关推荐

最新文章

热门文章