Ajax--Ajax基于原生javascript：创建Ajax对象、链接服务器、发送请求、接受响应结果
异步：指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
同步请求：
请求是由浏览器发送
页面会刷新
异步请求：
请求是由浏览器的一个js对象，XMLHTTPRquest对象发送
页面不会刷新,但是可以通过js代码得到请求的数据动态添加到页面上
一.Ajax应用小例子（get提交）
register_get.html (客户端)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tips{
color:red;
}
</style>
</head>
<body>
<form action="01_register.php" method="get">
<p class="tips" id="tips"></p>
用户名<input type="text" name="userName" id="userName"/>
密码<input type="password" name="userPwd" id="userPwd"/>
<input type="submit" value="登录">
</form>
</body>
</html>
<script>
/**
// 1.创建AJAX对象
// 2.链接服务器
// 3.发送请求
// 4.接受响应结果
* */ var userName = document.getElementById('userName');
var tips = document.getElementById('tips');
userName.onblur = function () { // 1.创建AJAX对象(xhr（小黄人） 创建一个小黄人)
var xhr = new XMLHttpRequest();
// 2.链接服务器(默认是true) 打开小黄人口袋，放一个地址进去
xhr.open("get",'register.php',true);
// 3.发送请求(小黄人要送出去)
xhr.send();
// 4.接受响应结果(小黄人带来了什么东西)
xhr.onreadystatechange = function () {
// console.dir(xhr);
// console.log(xhr.readyState);
if(xhr.status == 200 && xhr.readyState==4) {
var res = xhr.responseText;
tips.innerHTML = res;
}
}
}
</script>
register.php(服务器端)
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 15:03
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
echo 'Success，你成功的从PHP服务器拿到了数据';
由于是get提交所以数据暴露了
二.Ajax用户注册--用户名是否已经存在小例子：
register_step.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tips{
color:red;
}
</style>
</head>
<body>
<form action="01_register.php" method="get">
<p class="tips" id="tips"></p>
用户名<input type="text" name="userName" id="userName"/>
密码<input type="password" name="userPwd" id="userPwd"/>
<input type="submit" value="登录">
</form>
</body>
</html>
<script>
/**
// 1.创建AJAX对象
// 2.链接服务器
// 3.发送请求
// 4.接受响应结果
* */ var userName = document.getElementById('userName');
var tips = document.getElementById('tips');
userName.onblur = function () {
var txt = this.value; // 1.创建AJAX对象(xhr（小黄人） 创建一个小黄人)
var xhr = new XMLHttpRequest();
// 2.链接服务器(默认是true) 打开小黄人口袋，放一个地址进去
xhr.open("get",'register_step.php?userName='+txt,true);
// 3.发送请求(小黄人要送出去)
xhr.send();
// 4.接受响应结果(小黄人带来了什么东西)
xhr.onreadystatechange = function () {
// console.dir(xhr);
// console.log(xhr.readyState);
if(xhr.status == 200 && xhr.readyState==4) {
var res = xhr.responseText;
tips.innerHTML = res;
}
}
}
</script>
服务端：register_step.php
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 15:03
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
// echo 'Success，你成功的从PHP服务器拿到了数据';
$uName = $_GET['userName'];
$users = ["jack",'rose','tom'];
$isExist = in_array($uName,$users);
if($isExist) {
echo "该帐号已注册，换一个试试";
}else{
echo "你可以注册";
}
因为使用get提交，所以表单信息暴露在请求头里（这里是get相对与POST不安全地方）
三.Ajax应用小例子（POST提交）
register_post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tips{
color:red;
}
</style>
</head>
<body>
<form action="01_register.php" method="POST">
<p class="tips" id="tips"></p>
用户名<input type="text" name="userName" id="userName"/>
密码<input type="password" name="userPwd" id="userPwd"/>
<input type="submit" value="登录">
</form>
</body>
</html>
<script>
/**
// 1.创建AJAX对象
// 2.链接服务器
// 3.发送请求
// 4.接受响应结果
* */ var userName = document.getElementById('userName');
var tips = document.getElementById('tips');
userName.onblur = function () {
var txt = this.value; // 1.创建AJAX对象(xhr（小黄人） 创建一个小黄人)
var xhr = new XMLHttpRequest();
// 2.链接服务器(默认是true) 打开小黄人口袋，放一个地址进去
xhr.open("POST",'03_register_post.php',true);
// 3.发送请求(小黄人要送出去)
/*POST这种方式交互，需要手动设置<请求头>*/
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send('userName='+txt);
// 4.接受响应结果(小黄人带来了什么东西)
xhr.onreadystatechange = function () {
// console.dir(xhr);
// console.log(xhr.readyState);
if(xhr.status == 200 && xhr.readyState==4) {
var res = xhr.responseText;
tips.innerHTML = res;
}
}
}
</script>
register_post.php
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 15:03
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
// echo 'Success，你成功的从PHP服务器拿到了数据';
$uName = $_POST['userName'];
$users = ["jack",'rose','tom'];
$isExist = in_array($uName,$users);
if($isExist) {
echo "该帐号已注册，换一个试试";
}else{
echo "你可以注册";
}
四.GET和POST的AJAX封装：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tips{
color:red;
}
</style>
</head>
<body>
<form action="01_register.php">
<p class="tips" id="tips"></p>
用户名<input type="text" name="userName" id="userName"/>
密码<input type="password" name="userPwd" id="userPwd"/>
<input type="submit" value="登录">
</form>
</body>
</html>
<script>
/**
// 1.创建AJAX对象
// 2.链接服务器
// 3.发送请求
// 4.接受响应结果
* */ var userName = document.getElementById('userName');
var tips = document.getElementById('tips'); function myAjax(type,url,param) {
// 1.创建AJAX对象(xhr（小黄人） 创建一个小黄人)
var xhr = new XMLHttpRequest();
// 2.链接服务器(默认是true) 打开小黄人口袋，放一个地址进去
if(type.toUpperCase() == 'POST') {
xhr.open(type,url,true);
// 3.发送请求(小黄人要送出去)
/*POST这种方式交互，需要手动设置<请求头>*/
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send('userName='+param);
}else if(type.toUpperCase() == 'GET') {
xhr.open(type,url+"?userName="+param,true);
xhr.send();
} // 4.接受响应结果(小黄人带来了什么东西)
xhr.onreadystatechange = function () {
if(xhr.status == 200 && xhr.readyState==4) {
var res = xhr.responseText;
tips.innerHTML = res;
}
}
} userName.onblur = function () {
var txt = this.value;
myAjax('GET','02_register_step.php',txt) ;
// myAjax('POST','03_register_post.php',txt) ; }
</script>
Ajax--Ajax基于原生javascript：创建Ajax对象、链接服务器、发送请求、接受响应结果的更多相关文章
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- 原生JavaScript实现AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- 原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...
- 原生JavaScript 封装ajax
原生JavaScript 封装ajax function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...
- 原生JavaScript写AJAX
前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...
- ajax学习笔记(原生js的ajax)
ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...
- 【03】AJAX 向服务器发送请求
AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...
- AJAX - 向服务器发送请求请求
AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...
- 一个基于原生JavaScript开发的、轻量的验证码生成插件
Vcode.js 一个基于原生JavaScript开发的.轻量的验证码生成插件 V: 1.0.0 DEMO:https://jofunliang.github.io/Vcode.js/example. ...
- Ajax学习系列——向服务器发送请求
1.如何发送请求? 如果需要向服务器发送请求,我们使用的是XMLHttpRequest对象中的open()和send()方法. var xhr = new XMLHttpRequest();//具体创 ...
随机推荐
- [转]WPF--模板选择
典型的,把模板关联到一块特定的数据上,不过通常希望动态的确定使用哪个模板---既可以基于一个属性值,也可以是一个全局状态.当真正需要大规模替换模板时,也可以使用DataTemplateSelector ...
- 修改linux命令行的提示符PS1
# If not running interactively, don't do anything [ -z "$PS1" ] && return # check ...
- html常用标签详解4-列表标签
列表标签 列表标签分为3大类:无序列表.有序列表.自定义列表.线面我会依依简单介绍 一.无序列表 有个type属性: 默认:disc:实心小圆点:circle:空心小圆点:square:实心小方块:n ...
- 洛谷P3745 [六省联考2017]期末考试
传送门 题解 //Achen #include<algorithm> #include<iostream> #include<cstring> #include&l ...
- 【JZOJ5179】【NOI2017模拟6.29】哈哈
题意 给定一个长度为n的序列,你可以进行若干次操作: 选择一个区间,删掉,并获得Val[Len]的得分,Len为这个区间的长度: 其中这个区间满足: 1.相邻两个数差的绝对值为1 2.每个数都大于相邻 ...
- 视频透雾原理加视频增强Retinex算法介绍
(本文转自:http://www.syphong.cn/52-1.html#) 视频透雾原理加视频增强Retinex算法介绍 -上海凯视力成 钟建军 一. 视频增强的背景 视觉信息是人类获得外界信息的 ...
- Google 和 微软，就不是一个重量级的
看微软的 WinCE 模拟器,做得带模带样 Google 也不是新来的,但是 Android 模拟器,配置一下都那么费事 这就是差距,Google 比 微软 差了好几级
- leetcode 847. Shortest Path Visiting All Nodes 无向连通图遍历最短路径
设计最短路径 用bfs 天然带最短路径 每一个状态是 当前的阶段 和已经访问过的节点 下面是正确但是超时的代码 class Solution: def shortestPathLength(self, ...
- HTML5：使用Canvas和Input range控件放大缩小图片,剪裁，并上传图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- storm 动态设置并发度