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();//具体创 ...
随机推荐
- [JZOJ5229]【GDOI2018模拟7.14】小奇的糖果
题目 题目大意 在一个二维的平面上,有一堆有颜色的点,你需要找出一条水平线段,使得这个线段上面(或者是下面)的点的颜色不包含所有的颜色.问点数最大是多少. 思考历程 在一开始,我看错了题目大意. 题目 ...
- JavaSE_03_Thread类02
1.1 线程状态概述 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态.在线程的生命周期中, 有几种状态呢?在API中 java.lang.Thread.State 这个 ...
- Touching segments（数据结构）
题目链接 Problem Statement Your Maths professor is a very nice guy, but he sometimes comes up with not s ...
- 《DSP using MATLAB》Problem 7.34
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- 浅谈Python小数据池
什么是小数据池 小数据池是python中提高效率的一种方式,固定数据类型的相同值使用同一内存地址. id 用于获取开辟空间的内存地址 代码块 一个文件,一个模块,一个函数,一个类,终端中的每一行代码都 ...
- 洛谷P2827 蚯蚓
传送门 pts85/90(90应该是个意外,第一次交是90之后都是85了): 优先队列模拟题意 #include<iostream> #include<cstdio> #inc ...
- Mybatis编写初始化Dao代码
第一步:创建User实体类(POJO) package com.xu.pojo; import java.util.Date; /** * * @author 徐亮亮 * Title: User * ...
- 2019-4-6-VisualStudio-编码规范工具-2.6-修改当前文件编码
title author date CreateTime categories VisualStudio 编码规范工具 2.6 修改当前文件编码 lindexi 2019-04-06 15:31:53 ...
- Leetcode103. Binary Tree Zigzag Level Order Traversal二叉树的锯齿形层次遍历
给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如: 给定二叉树 [3,9,20,null,null,15,7], 3 / ...
- 国内在Amazon fireTV或者fire平板下载应用（netflix\hulu\YouTube）的方法
1.首先需要vpn翻墙至U.S. 2.需要一个美国亚马逊账户,并设置收货地址 (Manage Your Fire & Kindle 1-Click Payment Settings ),如果只 ...