Ajax
AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。
- 异步的JavaScript：
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。
PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。 - XML
XML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一
一、原生Ajax
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。
1 a. void open(String method,String url,Boolen async) 2 用于创建请求 3 4 参数： 5 method： 请求方式（字符串类型），如：POST、GET、DELETE... 6 url： 要请求的地址（字符串类型） 7 async： 是否异步（布尔类型） 8 9 b. void send(String body) 10 用于发送请求 11 12 参数： 13 body： 要发送的数据（字符串类型） 14 15 c. void setRequestHeader(String header,String value) 16 用于设置请求头 17 18 参数： 19 header： 请求头的key（字符串类型） 20 vlaue： 请求头的value（字符串类型） 21 22 d. String getAllResponseHeaders() 23 获取所有响应头 24 25 返回值： 26 响应头数据（字符串类型） 27 28 e. String getResponseHeader(String header) 29 获取响应头中指定header的值 30 31 参数： 32 header： 响应头的key（字符串类型） 33 34 返回值： 35 响应头中指定的header对应的值 36 37 f. void abort() 38 39 终止请求(终止耗时很久的ajax的请求)
XmlHttpRequest对象的主要方法
1 a. Number readyState 2 状态值（整数） 3 4 详细： 5 0-未初始化，尚未调用open()方法； 6 1-启动，调用了open()方法，未调用send()方法； 7 2-发送，已经调用了send()方法，未接收到响应； 8 3-接收，已经接收到部分响应数据； 9 4-完成，已经接收到全部响应数据； 10 11 b. Function onreadystatechange 12 当readyState的值改变时自动触发执行其对应的函数（回调函数），当上面的值发生变化的时候，每一次都会执行此onreadystatechange函数 13 14 c. String responseText 15 服务器返回的数据（字符串类型） 16 17 d. XmlDocument responseXML 18 服务器返回的数据（Xml对象）,帮你转化为xml对象，取值的时候，根据 obj.属性 去取值 19 20 e. Number states 21 状态码（整数），如：200、404... 22 23 f. String statesText
XmlHttpRequest对象的主要属性
XmlHttpRequest支持的浏览器：IE7+, Firefox, Chrome, Opera, etc， ActiveXObject("Microsoft.XMLHTTP") 支持的浏览器：IE6, IE5
1 def ajax(request):
2 return render(request,‘ajax.html‘)
3
4 def ajax_json(request):
5 print(request.POST)
6 ret = {‘status‘:True,‘data‘:None}
7 import json
8 return HttpResponse(json.dumps(ret))
View.py
1 <body>
2 <input type="button" value="Ajax1" onclick="Ajax1();">
3 <script>
4 //设置浏览器
5 function GetXHR(){
6 var xhr = null;
7 if(XMLHttpRequest){
8 xhr = new XMLHttpRequest(); //支持谷歌、火狐浏览器
9 }else{
10 xhr = new ActiveXObject("Microsoft.XMLHTTP"); //支持IE浏览器
11 }
12 return xhr;
13
14 }
15 function Ajax1(){
16 var xhr = new GetXHR();
17 xhr.open(‘GET‘,‘/ajax_json/‘,true); //默认是true
18 xhr.onreadystatechange = function(){
19 if(xhr.readyState == 4){ //接收完毕，已经接收到全部响应数据
20
21 //console.log(xhr.responseText);//这个就是我们要拿到的返回值
22 var obj = JSON.parse(xhr.responseText);
23 console.log(obj);
24 }
25 };
26 //xhr.setRequestHeader(‘k1‘,‘v1‘); //发送请求头
27 xhr.send(‘name=root;pwd=123‘); //必须以字符串的形式发，中间是分号
28 }
29 </script>
30 </body>
GET请求的方式
1 <body>
2 <input type="button" value="Ajax1" onclick="Ajax1();">
3 <script>
4 function GetXHR(){
5 var xhr = null;
6 if(XMLHttpRequest){
7 xhr = new XMLHttpRequest();
8 }else{
9 xhr = new ActiveXObject("Microsoft.XMLHTTP");
10 }
11 return xhr;
12
13 }
14 function Ajax1(){
15 var xhr = new GetXHR();
16 //xhr.open(‘GET‘,‘/ajax_json/‘,true); //默认是true
17 xhr.open(‘POST‘,‘/ajax_json/‘,true); //默认是true
18 //定义回调函数
19 xhr.onreadystatechange = function(){
20 if(xhr.readyState == 4){
21 //接收完毕
22 //console.log(xhr.responseText);//这个就是我们要拿到的返回值
23 var obj = JSON.parse(xhr.responseText);
24 console.log(obj);
25 }
26 };
27 //xhr.setRequestHeader(‘k1‘,‘v1‘); //发送请求头
28 //post方法需要设置一下请求头，后台才能接收到
29 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
30 xhr.send(‘name=root;pwd=123‘); //必须以字符串的形式发，中间是分号
31 }
32 </script>
33 </body>
post的请求方式
二、伪ajax操作
HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。
1 <body>
2 <input type="button" value="Ajax1" onclick="Ajax1();">
3
4 <input type="text" id="url"/><input type="button" value="发送iframe请求" onclick="iframeRequest();"/>
5 <iframe id=‘ifm‘ src="http://www.baidu.com"></iframe> #定义iframe的标签
6
7 <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
8 <script>
9 //修改url
10 function iframeRequest(){
11 var url = $("#url").val();
12 $(‘#ifm‘).attr(‘src‘,url);
13 }
14 </script>
15 </body>
iframe标签演示
伪ajax的演示Demo
1 def ajax_json(request):
2 print(request.POST)
3 ret = {‘status‘:True,‘data‘:request.POST.get(‘username‘)} #获取userName
4 import json
5 return HttpResponse(json.dumps(ret))
View.py
1 #document =>相当于一个上线下文或者是一个空间管理，我们整个后台，我们html里面又嵌套了一个html，不能直接用 obj.innertext，obj.children等方式获取，这个document是一个特殊的东西，要用也是的值跨进去
2 <body>
3 <!--建立from个iframe之间的关系，表单就会通过ifrm提交到后台去-->
4 <form action="/ajax_json/" method="POST" target="ifm1"> <!--target属性：表示关联哪一个ifram标签-->
5 <!--<iframe name="ifm1" ></iframe> --> <!--这边的值返回了，就会执行一个onload事件-->
6 <iframe id="ifm1" name="ifm1"></iframe> <!--这边的值返回了，就会执行一个onload事件-->
7 <input type="text" name="username"/>
8 <input type="text" name="email"/>
9 <input type="submit" onclick="submitForm();" value="Form提交"> <!--创建一个onlcick事件-->
10 </form>
11 </body>
12 <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
13 <script>
14 function submitForm(){
15 $("#ifm1").on(‘load‘,function(){
16 //console.log(123);
17 var text = $("#ifm1").contents().find(‘body‘).text(); //$("#ifm1").contents():表示是iframe下面的值
18 //console.log(text);
19 var obj = JSON.parse(text); // 拿到之后根据用户返回的数据做一些操作了
20 console.log(obj);
21 })
22 }
23 </script>
templates ajax.html
原文地址：https://www.cnblogs.com/Keep-Ambition/p/9771751.html
时间： 2024-08-10 00:04:13