《小白H5成长之路26》用jQuery的ajax加载实现异步信息切换

“我们继续上午的ajax加载，把剩下的事情做完吧！”，老朱跟小白说道。

“好的，我现在就打开上午的那个文件。”

“好的，小白，上午我们写的这个ajax加载是向handle页面发送一个用户uid，handle页面给我们返回这个用户的标识（uid）、姓名（userName）头像（imgSrc）、电话（tel）。现在我们实现这样一个简单的功能：点击用户列表中用户的名字，然后在详细信息显示区显示对应用户的详细信息。”

“这是现在页面的一个HTML布局，ul标签里面的li上我增加了一个uid属性记录每一个人的uid值。”

“uid不是li的默认属性吧？”

“恩，在HTML5里面每一个标签都可以看作是一个对象，而对象除了自带的属性外，我们还可以给它们添加一些特有属性，这里的uid我是写死的，如果是实际开发的时候，这里的li肯定也是通过ajax加载用户列表生成的，由于咱是练习为了方便我就先这样写了。”

“你先说一下你的实现思路吧！”，老朱对小白说。

“我觉得应该通过鼠标的点击（click）事件来触发ajax加载，当加载完成以后把加载回来的信息放到左边的显示区里面。我先看一下页面布局，稍等我试试看能不能实现这个功能。”

过了大概30分钟小白兴奋的找到老朱，“我实现出来了！你看看我的代码。”

“不错！你给我讲讲实现的原理吧！”

“好的，因为我们现在需要通过点击右边的用户名字进行ajax加载，所以我首先通过$("#userList ul li")选择器找到名字所在的容器列表，然后使用jQuery的click事件来触发ajax请求。”

“恩，不错！请继续。”

“ajax请求的关键参数是uid，而uid记录在了li标签上的uid属性里面，所以第一步就是通过$(this).attr()取当前触发点击事件（this）的li上的uid属性。拿到uid之后就可以向handle页面发送请求了，当请求成功以后，我先通过控制台输出查看返回的数据结构，然后把返回的用户信息放到对应的容器中。你看一下我实现的效果！”

“非常好！你的进步很快，以后如果你要是做web前端开发ajax加载数据会在各种功能模块中遇到，好的开始就是成功的一半，以后碰到不管多复杂的页面、一个页面不管同时发出多少个ajax请求，都是以今天的这个功能为基础的。所以我希望你能再次认真把jQuery中的ajax所有的参数介绍看一遍，脑海里有了这些参数的印象，以后碰到具体问题最起码知道ajax哪些功能可以实现，哪些功能不能实现，你说对不对？”

“没问题～”