一、ajax简介
Ajax = Asynchronous JavaScript and XML (异步的JavaScript和XML),Ajax是一种用于创建快速动态网页的技术。Ajax最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
二、ajax用法
跨域:
jquery方法封装:(jsonp跨域只能用于get请求,即使指定了post,也会变为get)
后台php头文件需要添加 header("Access-Control-Allow-Origin:*");
其中,*表示所有客户端,当然也可以指定
- // 指定允许其他域名访问
- header('Access-Control-Allow-Origin:*');
- // 响应类型
- header('Access-Control-Allow-Methods:POST');
- // 响应头设置
- header('Access-Control-Allow-Headers:x-requested-with,content-type');
$.ajax({ type:"GET", url:"http://www.deardull.com:9090/getMySeat", //访问的链接 dataType:"jsonp", //数据格式设置为jsonp jsonp:"callback", //Jquery生成验证参数的名称 success:function(data){ //成功的回调函数 alert(data); }, error: function (e) { alert("error"); } });
$.ajax({ async : true, url : "https://api.douban.com/v2/book/search", type : "GET", dataType : "jsonp", // 返回的数据类型,设置为JSONP方式 jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback jsonpCallback: 'handleResponse', //设置回调函数名 data : { q : "javascript", count : 1 }, success: function(response, status, xhr){ console.log('状态为:' + status + ',状态是:' + xhr.statusText); console.log(response); } });
jsonp跨域的原理:
动态创建src属性,由于img、link、script的src获取数据不是跨域,因此可以进行数据传输
具体的跨域原理:
var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild);
在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。
function handleResponse(response){ // 对response数据进行操作代码 }
缺点:如果不确定请求的URL是否安全,最好不用这种方法,这种跨域的方法并不安全
用post请求时,还需设置:
ajax.setRequestHeader('content-type', "application/x-www-form-urlencoded");
html中的enctype属性:
enctype:规定了form表单在发送到服务器时候编码方式。他有如下的三个值。
①application/x-www-form-urlencoded。默认的编码方式。但是在用文本的传输和MP3等大型文件的时候,使用这种编码就显得 效率低下。
②multipart/form-data 。 指定传输数据为二进制类型,比如图片、mp3、文件。
③text/plain。纯文体的传输。空格转换为 “+” 加号,但不对特殊字符编码。
$.ajax({ type: "POST", url: "test.php", data: "name=garfield&age=18", success: function(data){ $("#myDiv").html('<h2>'+data+'</h2>'); } });
ajax请求过程:
1. 创建对象(xmlHttp),判断是否为IE浏览器并给对象赋值
2. 异步调用服务器数据
3. 检查对象的onreadystatechange状态