Ajax学习---Ajax基础学习 180128
AJAX
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
异步/同步
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
AJAX的特点
1. 异步
2. 浏览器页面的局部刷新
AJAX的优缺点
优点:
AJAX使用Javascript技术向服务器发送异步请求;
AJAX无须刷新整个页面;
因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;
缺点:
AJAX并不适合所有场景,很多时候还是要使用同步交互;
AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;
AJAX技术
四步操作:
创建核心对象 var xmlHttp = new XMLHttpRequest()
使用核心对象打开与服务器的连接; xmlHttp.open(method,url,asynchronized)
发送请求; xmlHttp.send(); //如果是GET请求,则send(null),因为请求体在URL里
注册监听,监听服务器响应[根据响应状态确定请求是否完成,onreadystatechange会一直处监听状态]
var context = xmlHttp.responseText() 来接收后台的响应。
XMLHTTPRequest
open(请求方式, URL, 是否异步)
send(请求体):只有POST有请求体,GET的内容在浏览器的地址框内
onreadystatechange,指定监听函数,它会在xmlHttp对象的状态发生变化时被调用【有0,1,2,3,4状态】
readyState,当前xmlHttp对象的状态,其中4状态表示服务器响应结束
status:服务器响应的状态码,只有服务器响应结束时才有这个东东,200表示响应成功;
responseText:获取服务器的响应体
备注:
介绍一下XMLHttpRequest对象的5种状态:
0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法;
1:请求已开始,open()方法已调用,但还没调用send()方法;
2:请求发送完成状态,send()方法已调用;
3:开始读取服务器响应;
4:读取服务器响应结束。
简单的AJAX请求---get请求
<script>
function func1() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open('GET', /ajax/, true);
xmlHttp.send(null); # 推荐写上null,因为有的Firefox不支持括号内什么都不写的形式
xmlHttp.onreadystatechange=function () {
if(xmlHttp.status == 200 && xmlHttp.readyState == 4){
alert(xmlHttp.readyState);
context = xmlHttp.responseText(); {# 打印值 #}
}
};
}
// 创建XMLHttpRequest对象
function createXMLHttpRequest() {
var xmlHttp;
// 适用于大多数浏览器,以及IE7和IE更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e) {
// 适用于IE6
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// 适用于IE5.5,以及IE更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}
</script>
注意:
发送POST请求时:
<0>因为是POST请求,注意去掉settings.py里面的CsrfV防伪栈请求,否则403错误
<1>需要设置请求头【send之前open之后】,否则数据发送不过去
xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
注意 :form表单会默认这个键值对;
Ajax中不设定,Web服务器会忽略请求体的内容【后台娶不到此值】
urlencoded编码格式 : http://10.15.13.162/?username=FTL&password=hhh[注意问号]
{#form默认的,数据放在请求体内传递给后台#}
<form action="" enctype="application/x-www-form-urlencoded">
<input type="text">
</form>
<2>在发送时可以指定请求体了:xmlHttp.send(“username=yuan&password=123”)
xmlHttp.open('POST', /ajax/, true);
xmlHttp.send('name=FTL'&password='HHH') # 静态发送数据
post请求完整版:
<script>
function func1() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open('POST', /ajax/, true); // 先请求内容,后设置请求体发送数据
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('name=FTL');
xmlHttp.onreadystatechange=function () {
if(xmlHttp.status == 200 && xmlHttp.readyState == 4){
alert(xmlHttp.readyState);
context = xmlHttp.responseText(); {# 打印值 #}
}
};
}
// 创建XMLHttpRequest对象
function createXMLHttpRequest(){
...
}
</script>
Ajax实现的小结
创建XMLHttpRequest对象;
调用open()方法打开与服务器的连接;
调用send()方法发送请求;
为XMLHttpRequest对象指定onreadystatechange事件函数,这个函数会在
XMLHttpRequest的1、2、3、4,四种状态时被调用;
XMLHttpRequest对象的5种状态,通常我们只关心4状态。
XMLHttpRequest对象的status属性表示服务器状态码,它只有在readyState为4时才能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容,它只有在
readyState为4时才能获取到!
基于JS的AJax实例实现:
settigs.py:
'DIRS': [os.path.join(BASE_DIR, 'templates')], # 设置templates的路径为Django以前版本
# 'DIRS': [], # 注释掉该行,此为Django 2.0.1最新版本
# 'django.middleware.csrf.CsrfViewMiddleware',
...省略默认配置
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates'),) # 原配置
# 静态资源文件
STATICFILES_DIRS = (os.path.join(BASE_DIR, "statics"),) # 现添加的配置,这里是元组,注意逗号
templates/func_named.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="/ajax/" method="post">
{#移出框后触发函数,blur取消焦点,onfocus获得焦点#}
<p>用户名<input type="text" name="ajax_name" value="" onblur="func1(this)">
<span id="ajax_repeat"></span>
</p>
<p>密 码<input type="password" name="ajax_pass"><br></p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
<script>
function func1(self) {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open('POST', /ajax/, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var ajax_username = self.value;
console.log(ajax_username);
xmlHttp.send('ajax_username=' + ajax_username);
xmlHttp.onreadystatechange = function () {
if(xmlHttp.status == 200 && xmlHttp.readyState == 4) {
alert(xmlHttp.readyState);
context = xmlHttp.responseText; {# 返回函数的值 #}
if(context == '1'){
document.getElementById("ajax_repeat").innerHTML="用户名已注册";
}
}
};
}
// 创建XMLHttpRequest对象
function createXMLHttpRequest() {
var xmlHttp;
// 适用于大多数浏览器,以及IE7和IE更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e) {
// 适用于IE6
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// 适用于IE5.5,以及IE更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}
</script>
</html>
mysite2/urls.py
from django.contrib import admin
from django.urls import path
from blog import views
from django.conf.urls import url
urlpatterns = [
# Ajax
url(r'ajax/', views.ajax), # 将路径名跟函数进行映射
]
views.py
from django.shortcuts import render, HttpResponse
import datetime
# ajax
def ajax(request):
if request.method == 'POST':
ajax_username = request.POST.get('ajax_username')
print('ajax_name', ajax_username)
if ajax_username == 'FTL': # 存在返回1,不存在返回0
return HttpResponse("1")
return HttpResponse("0")
return render(request, 'ajax.html')
页面显示:
问题集结:
问题:
【整个关闭防火墙也可以】
控制面板\系统和安全\Windows 防火墙\允许的程序
【更多参考】https://www.cnblogs.com/Chuck-Y/p/7552116.html
Ajax学习---Ajax基础学习 180128的更多相关文章
- vagrant的学习 之 基础学习
vagrant的学习 之 基础学习 本文根据慕课网的视频教程练习,感谢慕课网! 慕课的参考文档地址:https://github.com/apanly/mooc/tree/master/vagrant ...
- [AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...
- 前端学习:html基础学习一
1.HTML的语法(主要内容HTML语法格式.文档注释.代码格式) HTML的特点 1.可以设置文本的格式,比如标题.字号.文本颜色.段落等等 2.可以创建列表(例如打开百度,我们可以看到这样的列表) ...
- JavaScript 学习笔记(基础学习)
一:来自W3School工具的学习 1:document.getElementById(id) : 访问某个标签的元素,然后对它进行操作 .innerHTML 对其内容进行修改 2:document. ...
- Python学习---线程基础学习
线程基础 什么是线程(thread) 线程是CPU调度能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流[换言之,线程就是一堆指令集合], ...
- 视频学习_css基础学习
块状元素 block element 容器元素 设置高宽 width height 可以容纳 文本 内脸 和其他块状 霸道 独占一行 特例:form 只容纳 块状元素 常见元素 http:// ...
- 前端学习:html基础学习五
9.HTML表单设计(主要内容<form><input><select>标记) 表单标记 <form>...</form> <form ...
- 前端学习:html基础学习四
7.HTML表格(主要内容<table><caption><tr><th><td>标记) <table>标记 基本格式 < ...
- 前端学习:html基础学习三
5.图像标记(主要内容<img>标记) <img>标记的使用方法 <img src="路径/文件名.图片格式" width="属性值&quo ...
- 前端学习:html基础学习二
3.文档设置标记上-格式标记(主要内容标记<br><p><center><pre><li><ul><ol><d ...
随机推荐
- eclipse自定义代码注释
效果如下: 自定义注释的方法:
- Integer源码分析
Integer中包含了大量的static方法. 1.分析Integer的缓存机制:首先定义了一个缓存区,IntegerCache,其实就是一个Integer数组cache[],它默认存储了从-128~ ...
- DIY党的福利!鹅厂程序员教你200元以内制作专属分体键盘
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由VellHe发表于云+社区专栏 前言 作为一名程序员,键盘在手,天下我有啊,不整把高大上的键盘怎么提升B格.之前一直想买个机械键盘,听 ...
- To B服务想做移动化?腾讯云案例了解一下
本文由 腾讯云助手团队 发布于 腾讯云云+社区 | 导语:腾讯云那么多资源和服务,就不能手机管理吗? 能. 当用户在使用To B服务时,往往会遇到各种各样的限制: 1.操作难度:涉及各种权限.多重验证 ...
- Flume1.6.0搭建
下载地址:http://archive.apache.org/dist/flume/ 解压完毕 切换到安装目录下/usr/local/flume/apache-flume-1.6.0-bin/conf ...
- JAVA泛型——协变
在上篇<JAVA泛型——基本使用>这篇文章中遗留以下问题,即将子类型Table或者也能添加到父类型Auction的泛型中,要实现这种功能必须借助于协变. 实验准备 现在在<JAVA泛 ...
- hadoop学习笔记(二):简单启动
一.hadoop组件依赖关系 二.hadoop日志格式: 两种日志,分别以out和log结尾: 1 以log结尾的日志:通过log4j日志记录格式进行记录的日志,采用日常滚动文件后缀策略来命名日志文件 ...
- springmvc fileupload
1.pom文件中fileupload的dependencyyinr <dependency> <groupId>commons-fileupload</groupId&g ...
- redis 绑定任意ip
vi /etc/redis.conf 修改bind语句为 bind 0.0.0.0
- input type =text,按回车键自动提交
1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' ac ...