AJAX 编程

第一章 ajax编程

1.1 Ajax
定义:Asynchronous Javascript And XML (异步的js和xml)
作用:可以在页面不断刷新的情况下,请求服务器,局部更新页面 (异步请求,局部刷新)
1.2异步
定义:只某段程序执行时不会阻碍其他条件的执行,其表现形式为程序的执行顺序不依赖与本身的书写程序,相反则为同步(程序执行时不会阻碍其他条件的执行,执行程序不依赖与书写顺序);
1.3 XMLHTTPRequest
浏览器内置对象,用于后台与服务器的交换数据,由此实现对网页的部分更新,而不是整个网页的更新 (局部刷新)
1.3.1 请求
HTTP请求3个组成部分与XMLHttpRequest方法
语法:
第一步:创建对象
var xhr=XMLHttpRequest(); //不考虑兼容性
第二步:准备和发送

a.get请求发送数据
var param ='username='+username+'&password='+password; //请求的参数 ,键值之间'='隔开,参数之间&隔开
xhr.open('get','demo.php?'+param,true); //true表示异步,get设置请求行
xhr.send(null);  //发送数据 

b.post请求发送数据
var param='username='+username+'&password='+password;
xhr.open('get','demo.php',true); 
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');  //设置请求头,post发送请求方式必须设置
xhr.send(param);

第三步:回调函数 onreadystatechange()

xhr.onreadystatechange=function(){
    if(xhr,readyState==4 && xhr.status==200) 
    var data=xhr.responseText; //接受从服务器传过来的字符串类型的字符串
}

1.3.3 API 详解
xhr.open() 发起请求，可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
readstate 属性有五个状态:

xhr.readyState=0时,(未初始化)还没有调用send()方法
xhr.readyState=1时,(载入)已调用send()方法,正在发送请求
xhr.readyState=2时,(载入完成)send()方法执行完成,已经接受到全部响应内容
xhr.readyState=3时,(交互) 正在解析响应内容
xhr.readyState=4时,(完成)响应内容解析完成,可以在客户端调用了
xhr.status表示响应码
xhr.statusText表示响应信息,响应数据
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘key’) 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体
注GET和post 请求方式的差异(面试题)
1.get没有请求体,使用xhr.send(null);
2.get可以通过请求url上添加请求参数
3.post可以通过xhr.send(‘name=name&age=10’);
4.post需要设置请求头
content-type:application/x-www-form-urlencoded
5.get大小限制约4k,post则没有限制
1.5 JSON格式
1.javascript解析方法
jsonencode(),jsondecode();
1.6 jQuery 中的Ajax
jQuery中封装了ajax
$.ajax({}) 可配置方式发起ajax请求$ .get()以GET方式发起aja请求
$.post()以post方式发起ajax请求
url接口地址
type请求方式
timeout请求超时
data Type 服务器返回格式
data 发送请求数据
beforeSend:function(){} 请求发起前调用
success 成功响应后调用
error 错误响应后调用
complete 响应完成时调用(包括成功和失败)

第2章模板引擎

2.1 流行模板引擎
BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
ArtTemplate：http://aui.github.io/art-template/zh-cn/
https://aui.github.io/art-template/ velocity.js：https://github.com/shepherdwind/velocity.js/
Handlebars：http://handlebarsjs.com/ http://blog.jobbole.com/56689/
2.2 artTemplate
1.引入template-web.js
2.在{{}}中包含js代码
3,语法:
js代码包含在{{}}中
{{data.key}}
{{data[‘key’}}
{{a?b:c}}
条件判断语句:
{{if value}}….{{/if}}
{{if v1}}…{{else if v2}}..{{/if}}
循环遍历

 {{each target }}
 {{$index}} {{$value}}
 {{/each}}

<script type=text/template id='nav'>
{{each target}}
js代码
{{/each}}
</script>
template('id','必须是对象');

第3章同源&跨域

3.1 同源
同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同
3.2 跨域
不同源则跨域
1-不允许进行DOM操作
2-不能进行ajax请求
3.3跨域方案
1,顶级域名相同的
3.4 JSONP
1.原理
其本质是利用了标签具有可跨越的特性,由服务器端返回一个预先定义好的javascript函数的调用,并且将服务器数据已该函数参数的形式传递过来,此方法需要要前后端配合完成.
3.5 jQuery 中的JSONP
jQuery的$.ajax()方法中集成了jsonp的实现,可以非常方便的实现跨域数据的访问,
data Type:’jsonp’ 设置dataType值为jsonp 即开启跨域访问;
jsonp 可以指定服务端接受的参数的’key’值,默认为callback
jsonpCallback 可以指定相应的回调函数,默认自动生成
3.6 服务器跨域 CORS跨域
header(‘Access-Control-Allow-Origin:‘); // 表示所有的服务器都可以访问
header(‘Access-Control-Allow-Origin:http://www.study.com‘); // 表示只有这个服务器可以访问

第4章 XMLHttpRequest2.0

4.1 FormData
a. 提供了一个新的内建对象,可用于管理表单数据
b.首先要获取一个表单form
c.然后在一个实例时 new FormData(form),将表单元素form传进去
d. 会返回一个对象,此对象可以直接作为 xhr.send(formData)的参数
e. 此时我们的数据就是以二进制形式传递了
f. 注意我们这里只能以post形式传递,浏览会自动为我们设置一个合适的请求头

**案例**
        调用jQuery中ajax方法,并且配合模板引擎,动态生成结构
        html 加 js代码
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <link rel="stylesheet" href="./css/index.css">
        </head>
        <body>
            <h2>京东商城</h2>
        <ul>
           <!-- 需要模板引擎动态生成 -->
        </ul>
        <script src="jquery-1.12.2.js"></script>
        <script src="template-web.js"></script>
        <script type="text/template" id="nav">
            {{each list}}  
            <!-- template模板引擎动态生成li -->
                <li>
                    <a href="#">
                        <img src="{{$value.src}}" alt="">
                        <p>{{$value.text}}</p>
                    </a>
                </li>
            {{/each}}
        </script>
        <script>
            $(function(){
                $.ajax({
                    url:"02-nav-date.php",
                    type:"get",
                    dataType:'json',     //将后台传入的字符串装换为数组或者对象
                    success:function(result){
                        //调用模板引擎里面的template方法,template("参数1传入模板引擎id",{必须传入对象})
                        var html=template("nav",{list:result});
                        // console.log({list:result});
                        $("ul").html(html);
                    },
                });
            });
        </script>
        </body>
        </html>

后台php代码

<?php
            $conn=mysqli_connect('localhost','root','root','students');
            mysqli_set_charset($conn,'utf-8');
            $sql='select*from dete';
            $res=mysqli_query($conn,$sql);
            while($row=mysqli_fetch_assoc($res)){
                $arr[]=$row;
            }
            echo json_encode($arr);
        ?>

第一章 ajax编程

第2章 模板引擎

第3章 同源&跨域

第4章 XMLHttpRequest2.0

猜你喜欢

第2章模板引擎

第3章同源&跨域