JS基础之AJAX基本知识点以及使用步骤与JSON的配合

╰+哭是因爲堅強的太久メ 2021-09-16 00:08 142阅读 0赞

AJAX = （Asynchronous JavaScript and XML异步的 JavaScript 和 XML）

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX是一种无需加载整个网页,可以对网页的某部分进行更新,称之为与服务器交换数据的艺术

核心与基础就是XMLHttpRequest对象,存在兼容问题,当前所有主流浏览器都支持,但是在IE56上不支持,在IE56上支持ActiveXObject

创建XMLHttpRequest()

xmlhttp = new XMLHttpRequest();

老版本IE56中使用ActiveX对象

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

兼容处理

var xmlhttp;

if(window.XMLHttpRequest)\{

xmlhttp = new XMLHttpRequest;

\}else\{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

AJAX的步骤

1.创建请求对象

var xmlhttp;

if(window.XMLHttpRequest)\{

xmlhttp = new XMLHttpRequest;

\}else\{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

2.准备请求open(),三个参数

参数1:表示请求方式,是一个字符串,不区分大小写,请求方式有get.post

参数2:表示请求的url,

参数3:表示请求同步或异步,true表示异步,fasle表示同步

get:通过url提交数据,数据在url中可以看到

:提交的数据最多只能有1024字节

:get方式提交的数据显示在url上,不安全

:get方式传播速率更快

post:方式提交的数据被隐藏,不会显示在url上,适合敏感数据

数据放置在html header内提交

没有提交数据的大小限制

post请求的时候需要建立请求头

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

假设用post 1.xhr.open("post","data.txt",true);

2.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

3.xhr.send();

3.发送请求 .send()方法:

4.监听请求的状态,此方法每当readyState的值发生改变时会自动调用

onreadystatechange

xhr.onreadystatechange = function()\{

if(xhr.readyState == 4 && xhr.status == 200)\{

//一定可以获得服务器返回的数据

//返回的数据存在属性responseText/responseXML中

//前端通常不直接处理xml格式的数据

document.write(xhr.responseText);

如果需要获得服务器的响应,请使用XMLHttpRequest对象的responseText或者responseXML

readyState属性存有XMLHttpRequest的状态信息

状态值从0到4发生变化

0:请求未初始化

1:服务器已经建立连接

2:服务器已经接受

3:请求处理中

4.请求已经完成,且响应已经就绪

status属性

200:OK请求成功

404:未找到页面

500:表示服务器错误

readyState和status区别

status体现的是服务器对请求的反馈,readyState表示AJAX所经历的几种状态

status体现的是服务器对请求的反馈，而readystate表明客户端与客户的交互状态过程。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>AJAX</title>
        </head>
        <body>
         <input type="button" id="btn" value="请求">
        </body>
        <script>
        btn.onclick = function(){
            //1.创建请求对象
    		var xhr ;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest;
               }else{
                  xhr = new ActiveXObject("Microsoft.XMLHTTP");
               }
            //2.建立请求
            //参数1:请求方式,参数2,请求的url,参数3:true为异步请求,false为同步请求
            xhr.open("get","classDate1.json",true);
            //3.发送请求
    		xhr.send();
            //4.监听请求
    		xhr.onreadystatechange = function(){
                if(xhr.readyState==4&&xhr.status==200){
                    //此时获得的是一个JSON格式的字符串数据
                    var date  = xhr.responseText;
                    //需要JSON.parse()方法将其转换为JS对象
                    console.log(date);
                    date = JSON.parse(date); 
                    //班号的获取:className
                    document.write("班号:"+date.classname+"<br/>");
                    //姓名性别信息:nameList
                    var namelist = date.namelist;
                    for(var i=0;i<namelist.length;i++){
                        //数组中的每一个元素都代表每一个同学
    					var stu = namelist[i];	
                        document.write("姓名:"+stu.name+", 性别:"+stu.sex+"<br>");    
                    }
    
                   }       
            }
            
        }
        </script>
    </html>
    
    
    //以下为JDON文件内容
    {
      	"classname":"xhh180503",
      	"namelist":[
      	{"name":"张大仙","sex":"仙女"},
      	{"name":"张大碗","sex":"仙女"},
      	{"name":"张小金","sex":"仙男"}
      	]
      }