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();//具体创 ...
随机推荐
- C++ 赋值函数为什么返回reference to *this?
赋值操作为什么要返回 reference to *this? 要弄清这个问题之前,先了解函数的返回值类型:返回值类型,返回引用类型 返回值类型:返回的是一个对象的副本. test operator= ...
- Fiilter
过滤器 过滤请求和响应 作用: 自动登录. 统一编码. 过滤关键字 .... Filter是一个接口 编写filter步骤: 1.编写一个类 a ...
- php用正则表达式匹配URL的简单方法（亲测可行）
https://www.jb51.net/article/43093.htm 在PHP的官网上看到的parse_url()函数的替代方案.结果和parse_url()函数差不多,是使用正则实现的.UR ...
- 跟我一起做一个vue的小项目（十）
接下来我们对城市列表页面进行优化,除了对数据优化,也会进行节流处理 //src\pages\city\components\Alphabet.vue <template> <ul c ...
- TZ_16_Vue父子组件之间的通信
1.父向子传递props,该如何传递 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- TZ_16_Vue的idea入门
1.Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便 ...
- HTTP协议详解(经典)
转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的 ...
- windows 2008 安装 apache + mysql + php
下载准备 php : http://windows.php.net/downloads/releases/archives/ apache : https://www.apachehaus.com/c ...
- [BZOJ2427][HAOI2010]软件安装-tarjan缩点-树上dp
<题面> 这个题真伤人 之前Tarjan和树规都没学好,吃了不少亏,仔仔细细的搞了一天,收获颇丰 先来一个Tarjan的链接:$\mathbb{O}$ 题目的数据比较友好: $dp$不对: ...
- JEECMS自定义标签开发步骤
JEECMS自带的只有[@cms_advertising]标签,并且官方没有给文档,用法: [@cms_advertising id='3'] <img src=&quo ...