angularjs $http服务--XMLHTTPRequest && SQL

angularjs中的XMLHttpRequest
$http是angularjs中的一个核心服务，它实现了前后端的数据交互，不像ajax那样烦琐，在angularjs中只需要使用$http服务即可实现网页的局部动态获取数据。
对于$http服务的格式，在angularjs中有两种写法，一种是常规的写法有些复杂，但是不难理解，另一种是属于简单的写法，分别如下：
常规的写法：

$http({method:"GET/POST",url:""}).then(function successCallback(response){//返回的结果保存在response中//如果返回正确则执行这里的代码块},function errorCallback(response){//如果结果返回错误则执行这里的代码块});

简易写法：

$http.get 或 post(url).then(function(response){//结果返回正确时需要执行的代码块},function(response){//结果返回有误的时候需要返回的代码块});

例如：

我们创建一个angularHttp.txt文件，文件中保存如下的对象：

保存格式utf-8的，否则出现乱码。

css部分如下：

<style type="text/css">table{width: 50%;}table, th , td  {  border: 1px solid grey;  border-collapse: collapse;  padding: 5px;  font-size: 14px;  text-align: center;  height:30px;  line-height: 30px;}table tr:nth-child(odd) {  background-color: #f1f1f1;}table tr:nth-child(even) {  background-color: #ffffff;}</style>

视图部分，也就是html标签部分如下

<div ng-app="myApp"><div ng-controller="myCtrl"><table><tr ng-repeat="x in person"><td>{{$index + 1}}</td><td>{{x.Name}}</td><td>{{x.Age}}</td><td>{{x.Job}}</td></tr></table></div></div>

控制器部分，也就是js部分。

<script type="text/javascript">var app = angular.module("myApp",[]);app.controller("myCtrl",["$scope","$http",myCtrl]);function myCtrl($scope,$http){$http({method:'GET',url:'angularHttp.txt'}).then(function successCallback(response){$scope.person = response.data.sites;console.log(response);},function errorCallback(response){alert("请求失败");});}</script>

运行上面的代码显示的结果如下图：

上面的代码是用常规的写法，那么简易的写法如下：（我们只修改控制器层，其他部分不变）

<script type="text/javascript">var app = angular.module("myApp",[]);app.controller("myCtrl",["$scope","$http",myCtrl]);function myCtrl($scope,$http){$http.post('angularHttp.txt').then(function(response){$scope.person = response.data.sites;console.log(response);},function(response){alert("请求失败");});}</script>

注意：我在常规写法中使用的是get请求，在简易写法中使用的是post请求，但是这个不影响，运行的结果都是一样，另外在css部分中有一个小的知识点。
odd与even
通俗的讲就是odd表示的是奇数行，even表示的是偶数行，它们常与ng-repeat指令结合使用，如果是在css中直接使用的话就像上面的格式一样书写，但是如果是在视图中写，那么格式改是什么样的呢？如下：

<div ng-app="myApp"><div ng-controller="myCtrl"><table><tr ng-repeat="x in person"><td>{{$index + 1}}</td><td ng-if="$even" style="background-color: #f1f1f1;">{{x.Name}}</td><td ng-if="$odd">{{x.Name}}</td><td ng-if="$even" style="background-color: #f1f1f1;">{{x.Age}}</td><td ng-if="$odd">{{x.Age}}</td><td ng-if="$even" style="background-color: #f1f1f1;">{{x.Job}}</td><td ng-if="$odd">{{x.Job}}</td></tr></table></div></div>

结果也是一样的，但是我感觉还是不推荐这样使用，首先不建议写行内样式，另外我们额外增加了html标签，无形中消耗了浏览器引擎的渲染速度。

下面写一个从数据库读取数据，在后台生成json返回给前台的调取实例。
数据库表如下：

数据库表设计如下：php文件如下（文件名为angularFile2.php）：

<?phpheader("Access-Control-Allow-Origin: *");header("Content-Type: application/json; charset=UTF-8");/*  * + ----------------------------------------------------------- * | 代码注释： * + ----------------------------------------------------------- * | header("Access-Control-Allow-Origin: *"); * | 解决跨域的问题 * + ----------------------------------------------------------- * | header("Content-Type: application/json; charset=UTF-8"); * | 这里决定了你后台servlet的http服务返回到前台的数据类型。设置成json前台返回的 * | 数据就是以json格式传输的。 * + ----------------------------------------------------------- * | 1、$mysqli 连接数据库 * | 2、测试连接如果connect_errno>0则连接错误     * | 3、$sql 查询数据库demo中的数据表angularjsFile * | 4、$mysqli_result 执行查询语句query返回数组类型（SELECT返回的是数组类型） * | 5、$outp 创建空对象，存储$mysqli_result中的记录 * | 6、循环取出的记录数据，第一次执行$outp如过不为空则在对象的后面加上一个“，”。 * | 注意：第一次程序执行的时候$outp肯定是空的，当第一次程序执行完毕后$outp就不会在为空， * | 这时候$outp中就有了一条记录。 * + ----------------------------------------------------------- * | php中的“.”是字符串连接的意思。 * + ----------------------------------------------------------- * | $outp = '{"records":['.$outp.']}';生成json格式的对象。 * + ----------------------------------------------------------- * | $mysqli->close();关闭数据库连接 * + ----------------------------------------------------------- * | echo($outp); 打印出数据。 * + ----------------------------------------------------------- * | 后台返回的json其实是一个对象，里面包含的是键值对，在键的名称自己定义，值为数组， * | 在数组中又包含的是对象。 * | 注意一定要很了解josn的数据格式，数组中包含的对象其实就是从数据库中读取的值。 * + ----------------------------------------------------------- */// 连接数据库$mysqli = new mysqli("localhost","root","123456SB","demo");// 判断连接是否成功if ($mysqli->connect_error>0){    echo "连接失败";}// 如果数据库连接成功则进行SQL语句的查询语句SELECT,查询angularfile$sql = "SELECT * FROM angularfile";$mysqli_result = $mysqli->query($sql);// 创建backResult空对象$backResult = "";// 执行while循环语句,循环数据库查询的结果集,并使用fetch_array()取出每条记录.while ($row = $mysqli_result->fetch_array(MYSQL_ASSOC)){        // 判断$backResult是否为不为空,如果不为空则在值后面加上",".    if ($backResult != ""){        $backResult .= ",";    };        // 使用字符串拼接的方式为$$backResult变量创建对象,着个对象中保存的是数据库angularfile表中的每条记录.    $backResult .= '{"Name":"' . $row["Name"] . '",';    $backResult .= '"City":"' . $row["City"] . '",';    $backResult .= '"Job":"' . $row["Job"] . '"}';}// 拼接返回的json对象,对象中键的名称为myfile,对象的值为数组.$backResult = '{"myfile":[' .$backResult .']}';// 关闭数据库连接$mysqli->close();// 打印返回给前台的json数据.echo $backResult;?>

前端代码如下：

<style>table{width:50%;}table, th , td  {  border: 1px solid grey;  border-collapse: collapse;  padding: 5px;  font-size: 14px;  text-align: center;  height:30px;  line-height: 30px;}table tr:nth-child(odd) {  background-color: #f1f1f1;}table tr:nth-child(even) {  background-color: #ffffff;}</style><div ng-app="myApp"><div ng-controller="myCtrl"><table>    <tr ng-repeat="x in names">                         <td>{{$index + 1}}</td>                         <td>{{x.Name}}</td>                         <td>{{x.City}}</td>                         <td>{{x.Job}}</td>    </tr></table></div></div><script type="text/javascript">var app = angular.module("myApp",[]);app.controller("myCtrl",["$scope","$http",myCtrl]);function myCtrl($scope,$http){$http({method:'GET',url:'angularFile2.php'}).then(function successCallback(backInfo){$scope.names = backInfo.data.myfile;console.log(backInfo);},function errorCallback(backInfo){alert("请求失败");});}</script>

运行上面的代码结果如下图：

扩展：

$index：遍历的进度（0...length-1）显示序号。
$first：当元素是遍历的第一个时值为true。
$middle：当元素处于第一个和后元素之间时值为true。
$last：当元素是遍历的后一个时值为true。
$even：当$index值是偶数时值为true。
$odd：当$index值是奇数时值为true。
至于本篇博文中后端提到的一些跨域，以及前端提到的性能优化这些小的知识点等后面我在统一的整理。
如有理解不当之处，欢迎各位老铁留言指正。谢谢！！！！