Ajax基础和异步对象的创建

最新推荐文章于 2021-09-28 21:59:27 发布

python_god

最新推荐文章于 2021-09-28 21:59:27 发布

阅读量424

点赞数 1

分类专栏： python ajax 文章标签： python ajax 异步对象

本文链接：https://blog.csdn.net/weixin_45179798/article/details/96967053

版权

python 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

Ajax

ajax 理论
- 什么是Ajax
ajax 核心对象-异步对象(XMLHttpRequest)
创建异步对象
XHR的成员

ajax 理论

什么是Ajax

Asynchronous Javascript And Xml
异步的 JS 和 Xml (JSON)

同步访问:
当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待
异步访问:
当客户端向服务器发送请求时，服务器在处理的过程中，浏览器无需等待,可以做其他操作

AJAX的优点:
1.异步访问
2.局部刷新

使用场合:
1.搜索建议
2.表单验证
3.前后端完全分离
SPA - Single Page Application

ajax 核心对象-异步对象(XMLHttpRequest)

什么是XMLHttpRequest
简称为"xhr"
称为 “异步对象”，代替浏览器向服务器发送异步的请求并接受响应
创建异步对象
xhr的创建是由js来提供的
主流的异步对象时XMLHttpRequest类型的，并且主流的浏览器都支持
(IE7+,Chrome,Firefox,Safari,Opera),但在IE低版本下是不支持XMLHttpRequest
支持XMLHttpRequest :
```
	通过new XMLHttpRequest()创建
```
不支持XMLHttpRequest:
```
	通过new ActiveXObject("Microsoft.XMLHTTP")
```
判断浏览器是否支持:
```
if(window.XMLHttpRequest){
			则说明浏览器支持 XMLHttpRequest
		}else{
			则说明浏览器支持 ActiveXObject("")
		}
```

创建异步对象

创建一个django程序 - AjaxDemo01
```
django-admin  startproject  AjaxDemo01
```

创建一个应用 - ajax

# 在AjaxDemo01 项目下 创建 app 命名为ajax
# python3  manage.py  startapp ajax
# 注册应用 项目下/sitting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'ajax'  # 注册Ajax应用]

创建路由/视图

		# 在 AjaxDemo01/urls.py 中配置路由
		from django.conf.urls import url, include
		urlpatterns =[
		url('admin/', admin.site.urls),
		url(r'^ajax/', include('ajax.urls')),
		]	
		#  在AjaxDemo01/ajax/urls.py 中创建urls.py文件 并配置路由
		from django.conf.urls import url
		urlpatterns = [
		url(r'^01-createxhr/$', views.create_views),
		]

		# 在 AjaxDemo01/ajax/views.py 中views.py文件 使用以下代码
		from django.shortcuts import render
		def create_views(request):
			    return render(request, 'Ajax/createXhr.html')

在网页/模板中创建一个js函数 - createXhr

# 创建templates文件存储模板中创建createXhr.html
#  AjaxDemo01/ajax/templates/createXhr  
# 引入外部js文件
	<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script type="text/javascript" src="../../../static/js/index01.js"></script>
</head>
<body>
<button onclick="createXhr()">创建xhr</button>
</body>
</html>

配置静态文件js文件到static中

#在sitting.py中 创建STATICFILES_DIRS 列表或者元祖将静态文件路径添加进去
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

	#js文件放入配置好的静态文件中
// 创建函数 createXhr()
function createXhr() {

    if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
        console.log(xhr);
        // console.log('则说明浏览器支持 XMLHttpRequest')
    } else {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        console.log(xhr);
        // console.log('则说明浏览器支持ActiveXObject("")')
    }
    return xhr
}

在函数中,创建异步对象并返回(或输出)浏览器支持 XML… 还是 Act …

XHR的成员

方法 - open()
作用:创建请求

//语法
xhr.open(method,url,async)
/* method:请求方式,取值  ' get'  或 'post'
	url: 请求地址,取值字符串
	async: 是否采用异步的方式发送请求
	true : 异步的
	false: 同步的
*/

示例
使用get方式向02-server的地址发送异步请求

属性 - readyState
作用:请求状态，通过不同的请求状态来表示xhr与服务器的交互情况
由0-4共5个值来表示5个不同的状态
0:请求尚未初始化
1:已经与服务器建立连接
2:服务器端已经接受请求信息
3:请求正在处理中
4:响应已完成

属性 - status
作用:表示服务器端响应状态码
200 : 服务器正确处理所有请求并给出响应
404 : Not Found
500 : Internal Server Error
… …
示例

if(xhr.readyState==4 && xhr.status==200){
			//正确的接收了服务器端所有响应内容
			//readyState==4 ,   xhr.status==200 不能换位置换位置后什么都出不来
		}

属性 - responseText
作用:表示服务器端响应回来的数据
示例

if(xhr.readyState==4 && xhr.status==200){
		//可以接收服务端的响应信息
				console.log(xhr.responseText);
			}

事件 - onreadystatechange
作用:每当xhr的readyState值发生改变时要触发的操作 - 回调函数
示例

xhr.onreadystatechange = function(){
			if(xhr.readyState==4 && xhr.status==200){
				// 接收响应数据做前端业务处理
			}
		}

方法 - send()
作用:通过xhr向服务器端发送请求
语法

xhr.send(body)
   		/* body:为请求主体
   		get请求:body的值为null */
   				xhr.send(null)
   		//post请求:body的值为请求体的数据
   				xhr.send("请求数据")

python_god

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础和异步对象的创建

Ajaxajax 理论什么是Ajaxajax 核心对象-异步对象(XMLHttpRequest)创建异步对象ajax 理论什么是AjaxAsynchronous Javascript And Xml异步的 JS 和 Xml (JSON)同步访问:当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待异步访问:当客户端向服务器发送请求时，服务器...
复制链接

扫一扫