Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

Stobadiouth

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量95

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42650983/article/details/82428941

版权

笔记专栏收录该内容

53 篇文章 0 订阅

订阅专栏

Ajax:Asynchronous Javascript And XML
异步JavaScript和XML

ajax开发步骤

创建ajax对象

   var oAjax = null;
   //判断window是否有XMLHttpReques对象
   if(window.XMLHttpRequest){
       oAjax = new XMLHttpRequest();
   }else{
       oAjax = new ActiveXObject('Microsoft.XMLHTTP');
   }

设置请求方式和路径
```
ajax.open("GET",url,true)
```
发送请求

ajax.send(null)

当onreadyStatechange为4时，判断statucode，然后取数据

oAjax.onreadystatechange=function(){
//readyState=4表示所有的http响应完成
if(oAjax.readyState==4){
   if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
      //取得数据
       var result=oAjax.responseText;
       var j=JSON.parse(result);
       alert(j.name);
   }else{
       alert('error');
   }
}

url格式化函数

function addURLParam(url, name, value) {
    url+=(url.indexOf("?")==-1)?"?":"&";
    url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
}

get方式发送数据

ajax.open("GET",url,true);//参数在url上
ajax.send(null);

post方式发送数据

ajax.open("POST",url);
ajax.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");// post发送参数前，需要设   置编码格式

 ajax.send("name=xxx&pwd=xxx");// 发送post数据

ajax的跨域问题
跨域

http://www.163.com

http://www.163.com:80

端口不同
http://www.163.com:8080

协议不同
https://www.163.com:80

模块不同
http://news.163.com:80

网址不同
http://www.qq.com:80

解决ajax的跨越问题
方法一

response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Methods'] = 'OPTIONS,HEAD,GET,POST'
response.headers['Access-Control-Allow-Headers'] = 'x-requested-with'

方法二：安装flask_cors