前端-ajax的各种写法及应用

原生AJAX

名称： 异步的javascript and xml

原理：

• 通过XMLHttpRequest与服务器交换数据
• 服务器数据通过json或者xml格式返回
• 浏览器通过js+css渲染展示数据

GET

1. 创建xhr
2. open打开连接
3. 监听readystate readyState 4准备状态完毕 status 状态码200 响应成功
4. send 发送

<button id="btn">点击</button>
		<p id="content"></p>
		<script type="text/javascript">
			var btn=document.querySelector('button');
			var content=document.querySelector('p');
			btn.onclick=function(){
				var xhr = new XMLHttpRequest();
				xhr.open('GET','./be.text',false);
				xhr.onreadystatechange = function(){
					if(xhr.status ==200&&xhr.readyState==4){
						content.innerHTML = xhr.responseText;
					}
				}
				xhr.send();
			}
		</script>

be.text内容

我爱ajax

POST

1. 创建xhr
2. open打开连接
3. 设置头信息(get省略)
   xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4. 监听readystate readyState 4准备状态完毕 status 状态码200 响应成功
5. send 发送

<input type="text" name='name' id="name" />
		<input type="text" name='age' id="age" />
		<button id="btn">点击</button>
		<p id="content"></p>
		<script type="text/javascript">
			var btn=document.querySelector('button');
			var content=document.querySelector('p');
			var name = document.querySelector('button').value;
			var age = document.querySelector('button').value;
			btn.onclick=function(){
				var xhr = new XMLHttpRequest();
				xhr.open('POST','https://520mg.com/ajax/echo.php',false);
				xhr.onreadystatechange = function(){
					if(xhr.status ==200&&xhr.readyState==4){
						content.innerHTML = xhr.responseText;
					}
				}
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				xhr.send(`name=${name}&age=${age}`);
			}
		</script>

JQuery中的ajax

分为3层

• 第一层：$.ajax()
• 第二层：$.get() $.post()
• 第三层：$.getJSON() $.getScript() load()

注意：以下需要引入JQuery

$.ajax()

<script type="text/javascript">
			
			var index = 1
			// 异步加载
			function AJAX(index=1){
				// 1. 创建一个 XMLHttpRequest 对象
				var req = new XMLHttpRequest();
				
				
				// 2. 打开链接
				req.open('GET',`https://api.apiopen.top/getJoke?page=${index}&count=10&type=video`,true)
				
				
				// 3. 建立事件监听
				req.onreadystatechange=function(){
					if(req.readyState==4&&req.status==200){
						let temp = JSON.parse(req.response);
						console.log(temp)
						for(let i of temp.result){
							for(let j in i){
								if(j=='video'){
									console.log(i[j])
									
									var vi = document.createElement('video')
									vi.src = i[j];
									vi.width=300;
									vi.controls='true'
									var p = document.createElement('p')
									p.appendChild(vi)
									
									document.body.appendChild(p)
								}
							}
						}
					}
				}
				
				
				// 4. 发送
				req.send()
			}
				
			AJAX(index)
			
			window.onscroll=function(e){
				
				if(document.documentElement.scrollHeight-window.innerHeight==document.documentElement.scrollTop){
					console.log('抵达末尾')
					index++
					AJAX(index)
				}
				
			}
			
			
			
		</script>

$.get()

 <script>
        $(function(){
            $('button').click(function(){
                $.get('./be.text',function(data,status){
                    if(status=="success"){
                        $('.con').text(data);
                    }
                })
            })
        })
        
    </script>

 <button>get</button>
    <div class="con"></div>


    <script>
        $(function(){
            $('button').click(function(){
                $.get('./be.text')
                .done(res=>{  //成功
                    $(".con").text(res);
                })    
                .fail(err=>{   //失败
                    console.log(err);
                })
                .always(xhr=>{  //总是
                    console.log("成功失败都执行",xhr);
                })
            })
        })
        
       

 <button>get</button>
    <div class="con"></div>


    <script>
        $(function(){
            $('button').click(function(){
                $.get('./be.text')
                .then(res=>{
                    $(".con").text(res);
                })    
                .catch(err=>{
                    console.log(err);
                })
               
            })
        })
        
    </script>

任意jq的ajax 都可以有这几种方式

1. 回调函数形式 $.get(url,function(){})

2. Promise done() fail() always()

3. Promise then() catch()

$.post()

 <input type="text" id="name">
    <input type="text" id="age">
    <button>发送</button>
    <div class="con"></div>
    <script>
        $(function(){
            $('button').click(function(){
                var name = $('#name').val();
                var age = $('#age').val();
                // var data = {name,age};
                
                $.post('https://www.520mg.com/ajax/echo.php',`name=${name}&age=${age}`)
                .then(res=>{
                    $(".con").text(res);
                })    
                .catch(err=>{
                    console.log(err);
                })
            })
        })
    </script>

$.getScript()

<button>getScript</button>
    <div class="con"></div>

    <script>
        $(function(){
                $('button').click(function(){
                    $.getScript('./script.js');
            })
        })
        
    </script>

$.getJSON()

<button>getJSON</button>
    <div class="con"></div>

    <script>
        $(function(){
                $('button').click(function(){
                    $.getJSON("./be.json",function(data,status,xhr){
                        console.log(data,status,xhr);
                        //data  be.json里面的数据
                        //status 状态 success成功
                        //xhr 封装好的jquery xhr对象
                        //JSON.stringify  把js对象转换成字符串
                        $('.con').text(JSON.stringify(data));
                    })
            })
        })
        
    </script>

load()

 <button>加载</button>
    <div class="con"></div>


    <script>
        $(function(){
                $('button').click(function(){
                    $('.con').load("./be.html");
            })
        })
        
    </script>

要学会ajax还得要知道跨域相关知识

1. 同源策略

当浏览器去访问服务器资源（ajax） 要求服务器的地址与浏览器同源,即协议，域名，子域名，端口号要一致。

2. 跨域

绕过浏览器的同源策略，请求到数据
跨域方式列举一下常用的3种

• 服务器响应头信息跨域
  Access-Control-Allow-Origin: *
• jsonp跨域
• 服务器代理（开发）

3. 异步，同步

同步：阻塞代码执行
异步：代码同时执行，不会阻塞代码

4.url地址的组成

例如：https:www.520mg.com:443/ajax/echo.php?name=mumu&age=18#cate

https 协议

www子域名

*520mg.com 域名

:443 端口号

/ajax/echo.php 路径

?name=mumu&age=18 查询条件

#cate 哈希值*