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();//具体创 ...
随机推荐
- touch滑动事件---简单小案例
html: <!--导航栏头部--><div class="type_nav"> <ul class="clearfix " v- ...
- Java虚拟机系列（二）---HotSpot虚拟机对象
都知道Java是一门面向对象的编程语言,在Java程序运行过程中,无时无刻不在创建对象,所以这节来总结一下HotSpot虚拟机中的Java对象. 一.Java虚拟机对象的创建过程. 在语义层面创建一个 ...
- Vuejs实战项目四：权限校验
路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...
- 请问Pycharm如何实现变量的批量重命名？
1.点击你要改的单词,右键refactor ->rename 2. Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换
- Luogu P2764 最小路径覆盖问题(二分图匹配)
P2764 最小路径覆盖问题 题面 题目描述 «问题描述: 给定有向图 \(G=(V,E)\) .设 \(P\) 是 \(G\) 的一个简单路(顶点不相交)的集合.如果 \(V\) 中每个顶点恰好在 ...
- java中error和exception的区别
转自:https://www.jianshu.com/p/e8bbee3c1c4a Error类和Exception类的父类都是throwable类,他们的区别是: Error类一般是指与虚拟机相关的 ...
- [转]web计时机制——performance对象
页面性能一直都是Web开发人员比较关注的领域.但在实际应用中,度量页面性能的指标,是javascript的Date对象.Web Timing API改变了这个局面,让开发人员通过javascript就 ...
- [转]js设计模式—发布订阅模式
发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式.本文将 ...
- JEECMS二次开发 -------标签使用说明
转载:https://blog.csdn.net/u012176984/article/details/45501771 一:标签套用结构说明 登录后台管理页面,这些嵌套在html中的标签 以[@标签 ...
- Python操作数据库遇到的问题
网上教程很多,不多赘述,记录一下遇到的问题. 开始安装的是Python3.x最新版本,用的是pycharm,教程参考有 https://www.cnblogs.com/yufeihlf/p/60041 ...