ajax前端请求部分问题总结

最近开始从理论阶段的ajax向实际操作步迈出，作为一个不太了解后端的小白，连接后台时多多少少出现些问题，就将跨域问题进行下小结：

• ajax前端请求时的跨域问题（由于不了解后台，就只总结下前端的问题）
  （浏览器控制台报出404错误）
  我找到的方法是采用ajax的"jsonp"
  在说跨域问题前先一下浏览器的同源策略：MDN中对于源的解释是：“如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源”。及同源便是指两个页面的协议，域名和端口相同的页面。而浏览器的同源策略是指浏览器中的一个脚本只能够访问与它同源的另一个的策略。比如，一个浏览器中打开了两个不同的页面，而浏览器在执行其中其中一个脚本时，会检测这个脚本是属于哪一个页面，判断脚本与当前页面是否同源，只有和当前页面同源的脚本才会被执行，如果是非同源的，那么在请求时浏览器则会抛出异常，提示拒绝访问。
  JSONP突破同源策略实现跨域：如src属性，href属性，它们在进行数据请求时并未受到同源策略的影响，而可以发现，这些属性本质上也是一个get请求，在用get 请求静态资源时，get请求时便将数据发送给了服务器端，而在服务器端接受到数据后便可以做出响应了。JSONP便是利用这种方式突破跨域请求的，这也是JSONP仅能够进行get请求的一个关键。例如：

<label>用户名</label><input type="text" id="inp_1" placeholder="输入用户名"/><br/>
<label>密码</label><input type="password" id="inp_2" placeholder="输入您的密码"/><br/>
<button id="btn">单击进行ajax请求</button>
<script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript">
$(function(){
        var username=$("#inp_1").val();
        var password=$("inp_2").val();
        $("#btn").click(function(){
                         $.ajax({
                                          async:true,
                                           url:"url"  ，             //异步请求的URL,此处为指定
                                           type:"GET",
                                           dataType:"jsonp",   //返回数据类型为JSONP方式
                                           jsonp:"callback",
                                           jsonpCallback:'handleRequest',
                                           data:{
                                                 name:username,
                                                 pwd:password
                                                 },
                                                 success:function(response,status,xhr){
                                                 alert('状态为："+status+"\n状态是:"xhr.statusText); 
                                              }}
                                        )}
								);
});
      </script>
                                                                                    

//如果进行请求的是静态的html页面，则需要在页面中添加这样一条标签：

<mata http-equiv="Access-Control-Allow-Origin" content="*"/>

文章可能存在问题，更了解的人希望给点帮助指点一下