前端篇—ajax

文章目录

  • 前言
  • 一、基于JS的ajax实现
    • 1.1 基础
    • 1.2 完整代码示例
    • 1.3 应用
  • 二、JSON和JSONP
    • 2.1 什么是JSON
    • 2.2 JSON语法
    • 2.3 应用
    • 2.4 json与django交互
    • 2.5 json与xml比较
  • 三、基于jQuery的ajax实现
    • 3.1 基础方法
    • 3.2 快捷方法
      • 用法示例
  • 四、跨域请求
    • 4.1 同源机制
    • 4.2 jsonp的js实现(未完成)
    • 4.3 jsonp的jQuery实现
    • 4.4 jsonp的ajax实现
  • 五、ajax配置

前言

1. 什么是ajax?

AJAX(Asynchronous JavaScript and XML):异步的 JavaScript 和 XML,即使用Javascript语言与服务器进行异步交互。

2. ajax还有一个最大的特点: 当服务器响应时,不用刷新整个浏览器页面,而可以局部刷新。

  • 与服务器异步交互
  • 浏览器页面局部刷新
  • return 服务端返回的数据不直接返回给页面,而是返回给ajax的回调函数处理

3. 优缺点
优点:

  • 使用js技术向服务器发送异步请求
  • 无须刷新整个页面
  • 服务器响应局部内容,所有ajax性能高

缺点:

  • ajax不适合所有场景,很多时候还是要使用同步交互
  • ajax虽然提高了用户体验,但向服务器发送请求的次数增多了,导致服务器压力增大
  • 因为是通过js技术完成的,所有还需要处理浏览器兼容性问题

4. AJAX技术

四步操作:

  1. 创建核心对象
  2. 使用核心对象打开与服务器的连接
  3. 发送请求
  4. 注册监听,监听服务器响应

XMLHttpRequest

  1. open(请求方式,是否异步)
  2. send(请求体)
  3. onreadystatechange:指定监听函数,在xmlhtpp对象的状态发生变化是被调用
  4. readyState:当前xmlhttp对象的状态,其中4状态标识服务器响应结束
  5. status:服务器响应的状态码,只有服务器响应结束时才有,200表示响应成功
  6. responseText:获取服务器的响应体

一、基于JS的ajax实现

1.1 基础

  1. 创建XMLHttpRequest对象的方法,为了解决浏览器兼容问题,用try创建相应的对象
function createXMLHttpRequest(){
   
        var xmlHttp;
        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;
    }
var xmlhttp = XMLHttprequest()				// 1. 创建XMLHttpRequest对象

xmlhttp.open('GET', 'url', true)			// 2.与服务器链接open('method', 'url', true)
// method: 连接方式
// url:指向的url
// true/false:异步/同步

xmlhttp.send('')							// 3. 传请求体的内容
// 如果是get请求,.send(null)

xmlhttp.onreadystatechange=function(){
   		// 4.监听
        console.log(xmlhttp.status);		// 响应状态代码 200/404
        console.log(xmlhttp.readyState);	// 状态码:目前执行到第几步 /0/1/2/3/4
    }

status
0:初始化未完成状态,创建XMLHttpRequest对象
1:请求开始,open()方法被调用,还没有send()
2:请求发送完成,send()方法被调用
3:开始读取服务器响应
4:读取服务器响应结束
注意: 如果onreadystatechange()监听函数写在open()和send()之后,readystate将没有0和1,

1.2 完整代码示例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf's webtitle>
head>
<body>
    <button onclick="func1();">提交button>
body>
html>

<script>
    function createXMLHttpRequest(){
    
        var xmlHttp;
        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;
    }
    
    function func1(){
    
        var xmlhttp = createXMLHttpRequest();

        xmlhttp.onreadystatechange=function(){
    
            if(xmlhttp.readyState===4 && xmlhttp.status===200){
    		// 响应成功时执行
                var data = xmlhttp.responseText;
                alert(data)
            }
        };
        
		// GET请求:
        // xmlhttp.open('GET', '/ajax/index', true);
        // 第一个参数为请求方式,GET/POST,第二个参数为指向的url,第三个参数默认为true用异步,false改为同步
        // xmlhttp.send(null);      // 发送数据,GET方法时传null
        // 监听
		
		// POST求情:
		xmlhttp.open('POST', '/ajax/index/', true);
        // 设置post请求头,在连接之后设置
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send('name=wolf');	// 将数据发送到后端
		
    }
script>

1.3 应用

注册用户时,实时监测用户名是否可用:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>registertitle>
head>
<body>
	
    <form action

你可能感兴趣的:(Django,django,js,ajax)