1. 全栈程序员必看首页

前端使用ajax_ajax属于前端吗

全栈程序员-用户IM • • 未分类

前端使用ajax_ajax属于前端吗原生AJAX名称：异步的javascriptandxml原理：通过XMLHttpRequest与服务器交换数据服务器数据通过json或者xml格式返回浏览器通过js+css渲染展示数据GET创建xhropen打开连接监听readystatereadyState4准备状态完毕status状态码200响应成功send发送<buttonid=”btn”>点击</button> <pid=”content”></p

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

原生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 哈希值*

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/187702.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号