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();//具体创 ...
随机推荐
- RuntimeError: You called this URL via POST, but the URL doesn’t end in a slash and you have APPEND_SLASH set.
做公众号测试的时候,发现了个问题: 提交表单报错:RuntimeError: You called this URL via POST, but the URL doesn’t end in a sl ...
- 微信小程序slider应用，可加减的slider控制
<view class="control-w "> <block wx:for="{{controls}}" wx:key="id& ...
- MyBatis配置文件(一)――properties属性
MyBatis配置文件中有很多配置项,这些配置项分别代表什么,有什么作用,需要理一下了.先通过下面这个例子来看都有哪些配置项 <?xml version="1.0" enco ...
- 冒泡排序算法[C++]
冒泡排序应该是最容易实现的一种排序算法了.其基本思想是:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将小 ...
- StopWatch 监控Java代码运行时间和分析性能
背景 有时我们在做开发的时候需要记录每个任务执行时间,或者记录一段代码执行时间,最简单的方法就是打印当前时间与执行完时间的差值,然后这样如果执行大量测试的话就很麻烦,并且不直观,如果想对执行的时间做进 ...
- 2019-8-8-WPF-非客户区的触摸和鼠标点击响应
title author date CreateTime categories WPF 非客户区的触摸和鼠标点击响应 lindexi 2019-08-08 16:48:31 +0800 2019-07 ...
- 2019-4-6-VisualStudio-编码规范工具-2.6-修改当前文件编码
title author date CreateTime categories VisualStudio 编码规范工具 2.6 修改当前文件编码 lindexi 2019-04-06 15:31:53 ...
- JUnit4中@Before、@After、@Test等注解的作用
转载:https://blog.csdn.net/tn_java/article/details/53837024 JUnit4使用Java5中的注解(annotation),以下是JUnit4常用的 ...
- Leetcode475.Heaters供暖器
冬季已经来临. 你的任务是设计一个有固定加热半径的供暖器向所有房屋供暖. 现在,给出位于一条水平线上的房屋和供暖器的位置,找到可以覆盖所有房屋的最小加热半径. 所以,你的输入将会是房屋和供暖器的位置. ...
- angular1.0 $http jsonp callback
$http.jsonp(sDUrl,{cache:false,jsonpCallbackParam:'callback'}); https://stackoverflow.com/questions/ ...