原生Ajax获取和创建全过程,及了解ajax的readyState状态码HTTP状态码。

了解ajax:
/ajax: (前后端进行交互) /自我理解:ajax调用可以更改公告里面的信息 不用全部更改/
概念:
什么是异步:当请求发送出去后,就可以处理其他的事情,当响应返回后在重新处理响应结果;
什么是同步:在请求过程中,如果没有返回结果,只能一直等待直到有回应为止;
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.
ajax是一种用于创建快速动态网页的技术.
特点:
ajax可以使网页实现一步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.
语法:
第一步:创建ajax对象
var xml=new XMLHttpRequest();
第二步:打开链接通道
xml.open(method,url,async);//请求方式 ,请求路径, 异步或同步
method:请求方式 get 或post
get:只能传输少量数据 通过路径携带传输 传输不安全 (传送速率快)
post: 对于传输的数据没有大小限制 独立传输 相当安全 (传送速率慢)
第三步:发送请求
xml.send();
第四步:接收返回值 监听状态
xml.onreadystatechange=function(){
if(xml.readyState 4&&xml.status200){//状态码4或者200时
alert(“请求成功”+xml.responseText);//弹出返回值
}
}else{
alert(“请求失败”+xml.status);
}
readyState状态码
0 :状态初始化(还没有调用open方法)
1 :服务器已连接(send方法完成,正在发生请求)
2 :请求已接受(send完成,已接收到全部响应内容)
3 :请求处理中(解析响应内容)
4 :请求已完成,且响应已就绪
HTTP状态码 status
1
** 信息,服务器收到请求,需要请求者继续执行操作
2** 成功,操作被成功接收并处理(当值是==200时请求成功)
3** 重定向,需要进一步的操作以完成请求
4** 客户端错误,请求包含语法错误或无法完成请求(前端错误)
5** 服务器错误,服务器在处理请求的过程中发生了错误(服务器错误)
xml取得响应的内容
responseText:获得字符串形式的相应数据
responseXML:获得xml形式的相应数据
status和statusText:以数字和文本形式返回http状态码
getALLResponseHeader():获取所有的响应报头。
getResponseHeader():查询响应中的某个字段的值
readyStatus属性:响应返回成功的时候得到通知。

域名.Json
*/

引入index.js文件

"name1=zhangsan&name2=lisi&name3=wangwu"

css样式

<style>
    p{
    
    
        text-align: center;
        font-weight: bold;
        font-size: 50px;
    }
</style>

html

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

JavaScript

<script>

    //ajax:ajax是异步获取// var obj="sgfghjkl";//创建添加获取的内容·(post方式提交)
    var body=document.body;//全局body
    var lis=document.getElementsByTagName("li");  //获取li
    //1.创建ajax对象
    var xml=new XMLHttpRequest();

    //2.服务器  建立打开链接通道(路径打开方式:以查寻字符串的方式出现)
    //1.例子: xml.open("get","http://www.baidu.com?name=gao&age=18&pass=123456",true);//请求方式 请求路径 async(同步或异步)
    //2.例子:xml.open("get","http://www.baidu.com?"+obj ,true);//obj:用变量名:来存储字符串内容
    xml.open("get","index.js",true);//请求方式 、请求路径、 async(同步false或异步true)、


    //3.发送请求
    xml.send();//1.如果是get方式请求 send()方法不需要添加任何值//2.如果是post方式提交,那么参数就是你要提交的数据
    //1.post方式提交:实在xml.send(obj) 2.如果是get方式提交: 2步骤.在xml.open("get","http://www.baidu.com?"+obj,true)

    //4.接收 监听
    xml.onreadystatechange=function(){
    
    
       if(xml.readyState==4&&xml.status==200){
    
    //readyState==4请求已完成且响应已就绪,status==200操作成功并处理。
          //例子if: 1.document.write(xml.responseText);//获得字符串形式的相应数据
           var str=xml.responseText;
           var arr=str.split("&");//split()字符串转成数组字符串的每一项
            for(var i in arr){
    
    
              console.log(arr[i]);//Array[3]数组的每一项
              arr[i]=arr[i].slice(arr[i].indexOf("=")+1);
            }
           console.log(arr);// ["zhangsan", "lisi", "wangwu""]
           for(var j=0;j<lis.length;j++){
    
    
               console.log(lis[j]);//<li></li><li></li><li></li>
               lis[j].innerHTML=arr[j];
           }
       }else {
    
    
          //例子else: 1.body.innerHTML="<p>"+xml.status+"<br>您的页面走丢了</p>"
           // 1.console.log(xml.status);//如果错误就查看状态码 查找错误原因
       }
    }

</script>

效果如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_46409887/article/details/105356081